使用 UI-Router 设置页面标题 [英] Set Page title using UI-Router

问题描述

我正在迁移基于 AngularJS 的应用程序以使用 ui-router 而不是内置路由.我配置如下

I am migrating my AngularJS based app to use ui-router instead of the built in routing. I have it configured as shown below

.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
    .state('home', {
        url: '/home',
        templateUrl : 'views/home.html',
        data : { pageTitle: 'Home' }

    })
    .state('about', {
        url: '/about',
        templateUrl : 'views/about.html',
        data : { pageTitle: 'About' }
    })
     });

如何使用pageTitle变量动态设置页面标题?使用内置路由，我可以做

How can I use the pageTitle variable to dynamically set the title of the page? Using the built in routing, I could do

$rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
    $rootScope.pageTitle = $route.current.data.pageTitle;
  });

然后在HTML中绑定变量，如下图

and then bind the variable in HTML as shown below

<title ng-bind="$root.pageTitle"></title>

是否有类似的事件可以让我使用 ui-router 挂钩?我注意到有onEnter"和onExit"函数，但它们似乎与每个状态相关联，并且需要我重复代码来为每个状态设置 $rootScope 变量.

Is there a similar event that I can hook into using ui-router? I noticed that there are 'onEnter' and 'onExit' functions but they seem to be tied to each state and will require me to repeat code to set the $rootScope variable for each state.

推荐答案

使用 $stateChangeSuccess.

你可以把它放在一个指令中:

You can put it in a directive:

app.directive('updateTitle', ['$rootScope', '$timeout',
  function($rootScope, $timeout) {
    return {
      link: function(scope, element) {

        var listener = function(event, toState) {

          var title = 'Default Title';
          if (toState.data && toState.data.pageTitle) title = toState.data.pageTitle;

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

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

还有:

<title update-title></title>

演示: http://run.plnkr.co/8tqvzlCw62Tl7t4j//#/home

代码: http://plnkr.co/edit/XO6RyBPURQFPodoFdYgX?p=预览

即使使用 $stateChangeSuccess，也需要 $timeout 才能使历史记录正确无误，至少在我自己测试时如此.

Even with $stateChangeSuccess the $timeout has been needed for the history to be correct, at least when I've tested myself.

2014 年 11 月 24 日 - 声明式方法:

app.directive('title', ['$rootScope', '$timeout',
  function($rootScope, $timeout) {
    return {
      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);
      }
    };
  }
]);

还有:

<title>{{title}}</title>

演示: http://run.plnkr.co/d4s3qBikieq8egX7//#/credits

代码: http://plnkr.co/edit/NpzQsxYGofswWQUBGthR?p=预览

这篇关于使用 UI-Router 设置页面标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！