javascript - Angular .js : UI not updating when variable changes

Question

我开始学习 Angular.js 并且我已经为我的应用创建了这个 Controller :

    angular.module('appName',[]).controller('mainController', [ function() {
        var self = this;
        self.appTitle = "List of done and not done things";
        self.readStatus = "readed";
        self.changeReadStatus = function() {
            readStatus = "not readed";
        };
        self.generalReadStatus = "Today I have " + self.readStatus + " this list.";
    }]);

标记如下所示:

<div ng-controller="mainController as ctrl">
    <h1 ng-bind="ctrl.generalReadStatus"><h1>
    <button ng-click="ctrl.changeReadStatus()">Change Status</button>
</div>

浏览器输出:

在 html 标记中，我使用 ng-click="ctrl.changeReadStatus()" 调用函数并更改内容。现在，我知道值发生了变化，但 UI(html 代码)没有更新。为什么？

Answer 1

问题是 Controller 的 generalReadStatus 已经被评估并且在因变量改变时没有被更新。我想在你的模板中你正在做一些事情:

<p>{{ctrl.generalReadStatus}}</p>

尝试这样的事情:

<p>Today I have  {{ctrl.readStatus}} this List.</p>