我正在迁移我的基于AngularJS的应用程序使用ui路由器而不是内置路由。我有它配置如下所示
.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路由器？我注意到有’onEnter’和’onExit’函数，但他们似乎绑定到每个状态，并将要求我重复代码为每个状态设置$ rootScope变量。
使用$ 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);
},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',$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>
