使用UI-Router设置页面标题

Question

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

.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变量动态设置页面标题？使用内置的路由，我可以

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

然后将变量绑定到HTML中，如下所示

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

是否有类似事件可以挂接到ui-router上？我注意到有“ onEnter”和“
onExit”函数，但它们似乎与每个状态相关，将需要我重复代码以为每个状态设置$ rootScope变量。

Answer 1

使用$stateChangeSuccess。

您可以将其放在指令中：

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 =
preview

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

编辑：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 =
preview