Question

我尝试在角应用中使用ui路由器更改我的页面标题我发现这个演示及其工作正常https://plnkr.co/edit/NpzQsxYGofswWQUBGthR?p=preview

但是当我尝试尝试相同的演示无法工作时，我需要找到使我的演示无效的问题https://plnkr.co/edit/pqumJL?p=preview

why demo not change page title although it's work in demo

Answer 1

试试这个：

(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>

https://plnkr.co/edit/JifcOKrUC9tBfV8jY5ko?p=preview

Answer 2

在plunkr中你只需要替换

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

通过

<script src="title-directive.js"></script>

我可以为您提供更好的方法：

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);
                    }
                }

Answer 3

谢谢问题解决了 ui路由器脚本和不兼容的版本有错误当使用在线版本时问题解决了

感谢所有

在ui-router中更改页面标题不起作用

3 个答案: