Angular ui 路由器，标题动态 [英] Angular ui router, title dynamic
问题描述
我如何使用帖子的参数标题，来显示浏览器的标题?
How I spend a parameter title of the post, to display the browser's title?
我在路线上使用 pageTitle 参数，但如果直接将:slug 作为值，则不起作用.
I use pageTitle parameter on my route, but if put directly: slug as a value, not works.
.state('posts',{
url : '/blog/:slug',
templateUrl : 'content/templates/single.html',
controller : 'SinglePostController',
data: {
pageTitle: 'title'
},
access: {
requiredLogin: false
}
})
推荐答案
data : {} 设置是静态的.
看到类似的:
如果您想要一些动态功能，请使用 resolve : {}
If you want some dynamic feature use resolve : {}
一些示例和问答的链接一个关于解决
Some links to examples and Q & A about resolve
EXTEND:一个简单的(非常幼稚但有效)示例如何使用 resolve 和 $rootScope 来管理浏览器标题(在这里查看):
EXTEND: A simple (really naive but working) example how to use resolve and $rootScope to manage browser title (check it here):
$stateProvider
.state('home', {
url: "/home",
templateUrl: 'tpl.html',
resolve: {
'title': ['$rootScope', function($rootScope){
$rootScope.title = "Other title";
}],
}
})
.state('parent', {
url: "/parent",
templateUrl: 'tpl.html',
resolve: {
'title': ['$rootScope', function($rootScope){
$rootScope.title = "Title from Parent";
}],
}
})
.state('parent.child', {
url: "/child",
templateUrl: 'tpl.html',
controller: 'ChildCtrl',
resolve: {
'titleFromChild': ['$rootScope', function($rootScope){
$rootScope.title = "Title from Child";
}],
}
})
这可能是 html
<!DOCTYPE html>
<html ng-app="MyApp" ng-strict-di>
<head>
<title>{{title}}</title>
试试这里
这里的一个挑战是 - 从子级到父级的导航要做什么，但可以通过将该设置移动到控制器中并使用 $scope.$on('detsroy'...
A challenge here is - what to do on navigation from child to parent, but it could be done by moving that setting into controller and work with $scope.$on('detsroy'...
.state('parent.child', {
url: "/child",
templateUrl: 'tpl.html',
controller: 'ChildCtrl',
// no resolve, just controller fills the target
})
.controller('ChildCtrl', ['$rootScope', '$scope', function ($rootScope, $scope) {
var title = $rootScope.title;
$rootScope.title = "Title from Child";
$scope.$on('$destroy', function(){$rootScope.title = title});
}])
这篇关于Angular ui 路由器，标题动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
