Angularjs 在ui路由器中更改页面标题无效_Angularjs_Angular Ui Router

Angularjs 在ui路由器中更改页面标题无效

angularjs

Angularjs 在ui路由器中更改页面标题无效,angularjs,angular-ui-router,Angularjs,Angular Ui Router,我尝试在angular app use ui router中更改我的页面标题我发现这个演示和它的工作很好但当我试图尝试相同的演示不工作时，我需要找到使我的演示不工作的问题试试这个： (function () { 'use strict'; angular .module('app', ['ui.router']) .config(config) config.$inject = ['$stateProvider', '$urlRo

我尝试在angular app use ui router中更改我的页面标题我发现这个演示和它的工作很好

但当我试图尝试相同的演示不工作时，我需要找到使我的演示不工作的问题

试试这个：

(function () {
    'use strict';

    angular
        .module('app', ['ui.router'])
        .config(config)

    config.$inject = ['$stateProvider', '$urlRouterProvider', '$urlMatcherFactoryProvider'];

    function config($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) {

      $urlRouterProvider.otherwise('/home');

      $urlMatcherFactoryProvider.caseInsensitive(true);

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'home.view.html',
                data: {
                    pageTitle: 'Home'
                }
            })
            .state('about', {
                url: '/about',
                templateUrl: 'about.view.html',
                data: {
                    pageTitle: 'About'
                }
            })

    }



})();

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
     <script src="https://code.angularjs.org/1.3.3/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>

    <script src="app.js"></script>
    <script src="app-directives/title-directive.js"></script>
     <title>{{title}}</title>
  </head>

  <body>
    <div class="panel" ui-view></div>
    <ul class="nav navbar-nav">
      <li>
        <a ui-sref="home" ui-sref-active="activeState">Home</a>
      </li>
      <li>
        <a ui-sref="about">About</a>
      </li>
    </ul>
  </body>

</html>

（函数（）{
"严格使用",；
有棱角的
.module（'app'，['ui.router']））
.config（配置）
配置.$inject=['$stateProvider'、'$urlRouterProvider'、'$URLMacherFactoryProvider']；
函数配置（$stateProvider、$urlRouterProvider、$urlMatcherFactoryProvider）{
$urlRouterProvider。否则（'/home'）；
$urlMatcherFactoryProvider.Case不区分大小写（true）；
$stateProvider
.州（“家”{
url:“/home”，
templateUrl:'home.view.html'，
数据：{
页面标题：“主页”
}
})
.state（'about'{
url:“/关于”，
templateUrl:'about.view.html'，
数据：{
页面标题：“关于”
}
})
}
})();
{{title}}


试试这个：
(function () {
    'use strict';

    angular
        .module('app', ['ui.router'])
        .config(config)

    config.$inject = ['$stateProvider', '$urlRouterProvider', '$urlMatcherFactoryProvider'];

    function config($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) {

      $urlRouterProvider.otherwise('/home');

      $urlMatcherFactoryProvider.caseInsensitive(true);

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'home.view.html',
                data: {
                    pageTitle: 'Home'
                }
            })
            .state('about', {
                url: '/about',
                templateUrl: 'about.view.html',
                data: {
                    pageTitle: 'About'
                }
            })

    }



})();

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
     <script src="https://code.angularjs.org/1.3.3/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>

    <script src="app.js"></script>
    <script src="app-directives/title-directive.js"></script>
     <title>{{title}}</title>
  </head>

  <body>
    <div class="panel" ui-view></div>
    <ul class="nav navbar-nav">
      <li>
        <a ui-sref="home" ui-sref-active="activeState">Home</a>
      </li>
      <li>
        <a ui-sref="about">About</a>
      </li>
    </ul>
  </body>

</html>

（函数（）{
"严格使用",；
有棱角的
.module（'app'，['ui.router']））
.config（配置）
配置.$inject=['$stateProvider'、'$urlRouterProvider'、'$URLMacherFactoryProvider']；
函数配置（$stateProvider、$urlRouterProvider、$urlMatcherFactoryProvider）{
$urlRouterProvider。否则（'/home'）；
$urlMatcherFactoryProvider.Case不区分大小写（true）；
$stateProvider
.州（“家”{
url:“/home”，
templateUrl:'home.view.html'，
数据：{
页面标题：“主页”
}
})
.state（'about'{
url:“/关于”，
templateUrl:'about.view.html'，
数据：{
页面标题：“关于”
}
})
}
})();
{{title}}


在plunkr中，您只需更换
<script src="app-directives/title-directive.js"></script>

在plunkr中，您只需更换
<script src="app-directives/title-directive.js"></script>

谢谢，问题解决了
ui路由器脚本和不兼容版本中存在错误
当使用在线版本时，问题就解决了
谢谢大家谢谢问题解决了
ui路由器脚本和不兼容版本中存在错误
当使用在线版本时，问题就解决了
谢谢大家
link: function (scope, element, attrs) {
                    var defaultTitle = element.text();
                    if (element[0].tagName === 'TITLE') {
                        var listener = function (event, toState) {
                            var title;
                            if (toState.data && toState.data.pageTitle) {
                                if(toState.data.placeholder && toState.data.placeholder.title)
                                    title = toState.data.pageTitle, toState.data.placeholder.title;
                                else
                                    title = toState.data.pageTitle;
                            } else if (defaultTitle) {
                                title = defaultTitle;
                            } else {
                                title = 'No title';
                            }

                            $timeout(function () {
                                element.text(title);
                            }, 0, false);
                        };

                        $rootScope.$on('$stateChangeSuccess', listener);
                    }
                }