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

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

directive title angular-ui-router angularjs

Dhana Lakshmi · 技术社区 · 9 年前

以下指令提供当前路由值

(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 回复 | 直到 9 年前

Shantanu 9 年前

将指令更新为:

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

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

8 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

8 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前