AngularJS：数据正在控制器中更新，但未在 HTML 中显示答案

【问题标题】：AngularJS: data is being updated in controller but it is not shown in the HTMLAngularJS：数据正在控制器中更新，但未在 HTML 中显示
【发布时间】：2015-01-05 22:41:39
【问题描述】：

在我的 AngularJS 应用程序中，我有以下代码：

example.html

<div>                           
    <p>{{name}}</p>
</div>

<div>
    <button ng-click="someFunction()"> </button>
</div>

exampleController.js

angular.module('myApp').controller('exampleController', ['$scope', 'myService', 
function($scope, myService) {

    $scope.someFunction = function() {

    }

    function updateName() {
        $scope.name = myService.getName();
    }

    updateName();

}]);

问题是 {{name}} 只有在我单击按钮时才会在 html 中更新。 updateName() 函数运行正确并且 $scope.name 被正确定义，但 {{name}} 仅在我单击某个按钮调用某个函数时显示。我不知道为什么页面加载时没有显示 {{name}}。有人可以帮我吗？

【问题讨论】：

您的控制器在哪里声明？它不在您上面的 exampleController 中
我隐藏了这些信息。现在添加。
什么叫updateName？它看起来不会从您发布的代码中的任何地方调用
添加调用函数。
您将下面的答案标记为解决方案，这还没有解决吗？

标签： javascript angularjs html angularjs-scope

【解决方案1】：

角度生命周期可能需要一些时间来适应，但简而言之，角度指令只会在角度事件（如 ng-click）期间重新评估。这是它如此重要的原因之一使用ng-click 而不是onclick。

在这种情况下，如果您的方法没有在 Angular 事件周期内被调用（例如通过 jQuery、简单的 window.onload 调用或默认的 window.setTimeout 方法调用），您将不会查看任何更改。您必须使用 ng- 事件或 angular 的 $timeout 服务。

要在您的应用启动时运行某些东西，您可以使用module.run，如本页所示。 https://docs.angularjs.org/guide/module

angular.module('MyMod', []).run(
    //Your code here, like
    updateName();
)};

另外，请尝试在此处阅读有关生命周期的更多信息： http://onehungrymind.com/notes-on-angularjs-scope-life-cycle/

【讨论】：

OP 正在使用 ng-click
是的，用户界面在调用someFunction()（实际上并没有做任何事情）后工作。对updateName() 的调用可能发生在角度事件周期之外，因此在下一次调用 $apply 之前不会看到更改（这将在单击按钮和运行 ng-click 时发生）