角度出乎意料地在身体内移动标题标签
角度出乎意料地在身体内移动标题标签
提问于 2016-12-07 21:45:06
我正在尝试制作一个单一的页面应用程序使用角，我想动态更改页面标题的基础上的意见。我尝试使用如下代码中所示的指令来执行该操作：
<!-- index.html !-->
<html ng-app="MyApp">
<head>
<page-title></page-title> <!-- ....................LINE 1 !-->
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js">
</script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.js">
</script>
<script type="text/javascript"
src="/js/index.js">
</script>
</head>
<body>
<nav-bar></nav-bar>
<div ng-view></div>
...下面是我的指令代码：
app.directive('pageTitle', function() {
return {
controller: 'titleController',
template: '<title>{{ page.title }}</title>' //.............LINE 2
}
});标题正在按预期变化。一切都很完美，除了<head>标记中的任何代码，现在移动到主体内，包括标题、样式和脚本标记。这对SEO不利。我搜索了这个问题，并在this链接上找到了一些替代的解决方案，但没有找到这个异常的确切解决方案和解释。我甚至尝试更改第1行和第2行如下：
<title><page-title></page-title></title> << LINE 1
template: '{{ page.title }}' << LINE 2这让事情变得更加出乎意料。它根本不改变标题，而是在每个页面的标题上直接打印出<page-title></page-title>，就好像没有为<page-title>标记定义任何指令一样。我想要一些关于这两个异常的角度解释。:(
回答 1
Stack Overflow用户
发布于 2016-12-07 22:27:34
不确定如何定义页面标题，但可以在stateProvider中执行以下操作并定义页面标题
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
data: {
pageTitle: 'Home'
}
})
.state('about', {
url: '/about',
templateUrl: 'about.html',
data: {
pageTitle: 'About'
}
})
.state('credits', {
url: '/credits',
templateUrl: 'credits.html',
data: {
pageTitle: 'Credits'
}
});
}
]);至于你的指示
app.directive('pageTitle', ['$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 page-title></title>
使用给定的文本设置element.text将作为您使用模板定义新标记的方式进行排序。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41027942
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号