代码之家 › 专栏 › 技术社区 › Dhana Lakshmi

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

directive title angular-ui-router angularjs

0

Dhana Lakshmi · 技术社区 · 8 年前

以下指令提供当前路由值

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

我已经定义了如下所示的路线

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

当我尝试使用如下索引中所示的指令时。html

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

<title>Retailer Application</title>

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

请建议一种方法

1 回复 | 直到 8 年前

1

Shantanu 8 年前

将指令更新为:

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}} . 之后,只需添加 test-title

Working Plunker

还要确保您使用的是0.4.2版本的ui路由器。对于ui路由器的最新版本(1.x),不推荐使用$statechangesccess事件。使用 $transitions.onSuccess 相反

Official Documentation issue