javascript - AngularJS $scope 不会在回调函数中更新吗？

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 不会触发摘要周期，因此 View 不会更新。 Angular 附带一个内置的 $timeout 模块 - 使用该模块，将执行摘要循环，并且您的 View 将更新。

使用:

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