AngularJS更新控制器变量并再次渲染视图?

时间:2015-03-22 23:50:06

标签: javascript angularjs model-view-controller

我有一个结构非常简单的网页,想象左侧导航,标题栏和内容区域。如果我必须用代码描述它,它看起来像这样

<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”,我认为添加面包屑插件对于手头的任务来说是一种过度杀伤:(

1 个答案:

答案 0 :(得分:2)

您通过title = newTitle中断数据绑定。控制器指向旧的title,但HeaderData不再指向它,因此丢失了。你需要另一个点。

this.title = newTitle;

title方法当然也应该返回this.title