我有一个结构非常简单的网页,想象左侧导航,标题栏和内容区域。如果我必须用代码描述它,它看起来像这样
<body>
<aside ng-controller="SideNavCtrl">Left Nav data</aside>
<header ng-controller="HeaderCtrl">Page Title</header>
<section>
<article ng-view>Page Content</article>
</section>
我正在使用ngRoute并左右更改我的路线。我想要的是从接受路线的控制器更新“页面标题”。我尝试了数百种不同的方法,但更改变量从不强制标题数据更新。这是控制器之间的最新变量共享(不起作用)
app.controller("HeaderCtrl", ["$scope", "HeaderData", function($scope, HeaderData) {
$scope.title = HeaderData.title();
}]);
app.factory("HeaderData", function() {
var title = 'Default';
return {
title: function() { return title; },
setTitle: function(newTitle) { title = newTitle; }
}
});
稍后在路由控制器中我会像这样
app.controller("PreviewBuildCtrl", ["$scope", "$routeParams", "$location", "BuildsAPIService", "HeaderData", function($scope, $routeParams, $location, BuildsAPIService, HeaderData) {
$scope.build = BuildsAPIService.getBuildById($routeParams.buildId);
HeaderData.setTitle("Previewing Build");
console.log(HeaderData);
if (!$scope.build) {
$location.url('/builds/' + $routeParams.profession);
}
}]);
问题是使用HeaderData.setTitle()不会更新标头内容。我真的不想为这个任务编写jQuery代码。必须有一个更聪明,更有棱角的方式来做到这一点。
当我从第a页移到页面b时,我想要做的就是将标题标题更改为“页面B”,我认为添加面包屑插件对于手头的任务来说是一种过度杀伤:(
答案 0 :(得分:2)
您通过title = newTitle
中断数据绑定。控制器指向旧的title
,但HeaderData
不再指向它,因此丢失了。你需要另一个点。
this.title = newTitle;
title
方法当然也应该返回this.title
。