Question

我有这个简单的片段：

HTML：

<div ng-app="myApp" ng-controller="SampleController">
   <p>{{val1}}</p>
   <p>{{val2}}</p>
   <input type="button" value="Update" ng-click="update()" />
</div>

使用Javascript：

var app = angular.module('myApp', []);

app.controller('SampleController', ['$scope', function($scope) {

    $scope.val1 = "Not updated";
    $scope.val2 = "Not updated";

    $scope.update = function () {
        $scope.val1 = "Updated outside!";

        setTimeout(function () {
            $scope.val2 = "Update inside!";
        }, 1);
    };
}]);

代码段也在jsfiddle。

如果单击更新按钮，则仅在html中更新值val1。如何解决？但最重要的是，为什么会发生这种情况？

PS： setTimeout只是问题的简化。实际上问题是任何具有回调函数的自定义组件。

Answer 1

setTimeout不会触发摘要周期，因此视图不会更新。 Angular附带一个内置的$timeout模块 - 使用它并执行摘要周期，您的视图将更新。

使用：

app.controller('SampleController', ['$scope', '$timeout', function($scope, $timeout) {
    $timeout(function() { $scope.val2 = "see?" }, 5000);
}]);

AngularJS $范围是否在回调函数中不更新？

1 个答案: