Question

以下指令提供当前路由值

b - b

我定义了如下所示的路线

(function () {
    var titleDirective=angular.module('titleDirective',[]);
    titleDirective.directive('testTitle',function ($rootScope, $timeout) {
        return {
            restrict: 'E',
            link: function() {
                var listener = function(event, toState) {
                    $timeout(function() {
                        $rootScope.title = (toState.data && toState.data.pageTitle)
                            ? toState.data.pageTitle
                            : 'Default title';
                    });
                };
                $rootScope.$on('$stateChangeSuccess', listener);
            }
        };
    })
})();

当我尝试在index.html

中使用如下所示的指令时

 .state('admin.signIn', {
            url: '/signIn',
            templateUrl: 'credentials/signIn.html',
            controller: 'loginCtrl',
            data : { pageTitle: 'Home' }
        })

但不确定如何在更改路径

时更新html的title标签中的值

<test-title>{{title}}</test-title>

不确定如何使用{{title}}来表现得像标题

请建议一种方法

Answer 1

将您的指令更新为：

myApp.directive('testTitle', function($rootScope, $timeout) {
  return {
    restrict: 'E',
    template: `<title>{{$root.title}}</title>`,
    link: function() {
      var listener = function(event, toState) {
        $timeout(function() {
          $rootScope.title = (toState.data && toState.data.pageTitle) ? toState.data.pageTitle : 'Default title';
        });
      };
      $rootScope.$on('$stateChangeSuccess', listener);
    }
  };
});

在您使用$ rootScope作为模板中的标题变量时，您可以使用{{$root.title}}。之后，只需在index.html的head部分添加test-title指令

Working Plunker

另外请确保您使用的是ui-router的0.4.2版本。随着最新版本（1.x）的ui-router $ stateChangeSuccess事件被弃用。请改用$transitions.onSuccess。

Official Documentation＆amp; issue

无法在路线更改时更新角度1应用程序的标题

1 个答案: