AngularJS 更新控制器变量并再次渲染视图？答案

【问题标题】：AngularJS update controller variable and render the view again?AngularJS 更新控制器变量并再次渲染视图？
【发布时间】：2015-03-22 23:50:06
【问题描述】：

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

<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”，并且我认为添加面包屑插件对于手头的任务来说是一种矫枉过正:(

【问题讨论】：

标签： javascript angularjs model-view-controller

【解决方案1】：

您通过title = newTitle 破坏了数据绑定。控制器指向旧的title，但HeaderData 不再指向它，所以它丢失了。你需要另一个点。

this.title = newTitle;

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

【讨论】：

不管 PreviewBuildCtrl 刚刚使用 setTitle 的事实，我都以这种方式得到“未定义”
哎呀，修好了。我现在将整个 HeaderData 传递给范围，并在视图中使用这些方法。现在相应地更新，谢谢:)