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

Question

在我的 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}} 在页面加载时没有显示。有人可以帮助我吗？

Answer 1

angular 生命周期可能需要一些时间来适应，但简而言之，angular 指令只会在 angular 事件期间重新评估，例如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/

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

AngularJS: data is being updated in controller but it is not shown in the HTML

javascript

angularjs

html

angularjs-scope