角UI路由器，动态称号 [英] Angular ui router, title dynamic
问题描述
我如何度过后的参数标题，显示浏览器的标题？
我用PAGETITLE参数我的路线上，但如果把直接：蛞蝓作为值，而不是作品
.STATE（'职位'，{
网址：'/博客/：蛞蝓，
templateUrl：'内容/模板/ single.html'，
控制器：'SinglePostController'，
数据：{
PAGETITLE：'标题'
}，
访问：{
requiredLogin：假的
}
}）
的数据：{} 设置为静态
看到类似的：
如果您想进行一些动态特征使用 解析：{}
一些链接实例和Q＆安培;关于解决
扩展：一个简单的（真的很幼稚，但工作）的示例演示如何使用解析和 $ rootScope 管理浏览器的标题（这里检查）：
$ stateProvider
.STATE（'家'，{
网址：/家，
templateUrl：tpl.html'，
解析：{
'标题'：'$ rootScope'，函数（$ rootScope）{
$ rootScope.title =其他称号;
}]，
}
}）
.STATE（'父'，{
网址：/父，
templateUrl：tpl.html'，
解析：{
'标题'：'$ rootScope'，函数（$ rootScope）{
$ rootScope.title =从父标题;
}]，
}
}）
.STATE（'parent.child'，{
网址：/子，
templateUrl：tpl.html'，
控制器：'ChildCtrl'，
解析：{
titleFromChild'：'$ rootScope'，函数（$ rootScope）{
$ rootScope.title =从子标题;
}]，
}
}）
这可能是HTML
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=MyApp的NG-严格二＆GT; ＆LT; HEAD＆GT;
＆LT;标题＆GT;的{{title}}＆LT; /标题＆GT;
试用这里
在这里的挑战是 - 对导航做什么，从孩子的父母，但它可以通过移动设置到控制器和工作， $范围来完成$在（'detsroy ...
下面是调整plunker
.STATE（'parent.child'，{
网址：/子，
templateUrl：tpl.html'，
控制器：'ChildCtrl'，
//没有解决，只是控制器填补了目标
}）.controller（'ChildCtrl'，['$ rootScope'，'$范围'，函数（$ rootScope，$范围）{
VAR标题= $ rootScope.title;
$ rootScope.title =从子标题;
$ $范围在（'$破坏'，函数（）{$ rootScope.title标题=}）。
}]）
How I spend a parameter title of the post, to display the browser's title?
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
}
})
The data : {} setting is static.
see similar:
If you want some dynamic feature use resolve : {}
Some links to examples and Q & A about resolve
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";
}],
}
})
And this could be the html
<!DOCTYPE html>
<html ng-app="MyApp" ng-strict-di>
<head>
<title>{{title}}</title>
Try it here
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'...
Here is adjusted plunker
.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});
}])
这篇关于角UI路由器，动态称号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
