Angular：更新$ scope不能在setTimeout回调中工作

Question

在angular.js中，$scope.greeting = xxx在window.setTimeout中不起作用。它没有任何影响：

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

myApp.controller('MyCtrl', function ($scope) {
    $scope.greeting = 'init';
    window.setTimeout(function () {
        console.log('update greeting');
        $scope.greeting = "hello"; // doesn't work here.
    }, 3000);
})

为什么？

完整比较如下：

• 它的工作原理（在ajax中）：http://jsfiddle.net/victorwoo/eDb2S/129/
• 它不起作用（window.setTimeout）：http://jsfiddle.net/victorwoo/3b3s6ukp/2/

Answer 1

setTimeout在$digest周期之外运行 - 因此，angular不知道您应用于$scope的更改。

使用内置的window.setTimeout函数

代替$timeout

查看此（您）更新的jsfiddle here

Answer 2

我认为你必须使用角度

的特殊服务

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

myApp.controller('MyCtrl', function ($scope, $timeout) {
    $scope.greeting = 'init';
    $timeout(function(){
        $scope.greeting = "hello";
    }, 2000);
})

Answer 3

在这种情况下，（如答案中所述）您可以使用$timeout代替setTimeout。但在所有情况下，您都可以使用$scope.$apply()来更改$ digest循环之外的$ scope。

window.setTimeout(function () {
    $scope.greeting = "hello";
    $scope.$apply();
}, 3000);