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

问题描述

我迁移我AngularJS基于应用程序使用的用户界面路由器，而不是内置的路由。我有它配置，如下图所示。

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路由器类似的活动？我注意到有的OnEnter和onExit功能，但他们似乎被捆绑到每一个国家，并要求我重复code设置每个州$ 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

code： http://plnkr.co/edit/XO6RyBPURQFPodoFdYgX?p=$p$pview

即使 $ stateChangeSuccess 的 $超时已所需的历史是正确的，至少在我'已经测试过自己。

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

code： http://plnkr.co/edit/NpzQsxYGofswWQUBGthR?p=$p$pview

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