如何正确使用AngularJS摘要循环

Question

我一直在研究 AngularJS 摘要周期的注意事项，我想更好地了解正确使用和不正确使用它之间的区别。

例如，如果我有一个 AngularJS 代码，如下所示：

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

myApp.controller("testController", ["$scope", "$timeout", function($scope, $timeout){
    setTimeout(function(){
        $scope.username = "Test User name";
    }, 3000);

    $timeout(function(){
        $scope.username = "AngularJS User name";
    }, 3000);
}]);

为什么 setTimeout 没有被用作摘要循环的一部分，而 $timeout 是，我该如何解决这个问题？

请记住，我不仅在寻找代码解决方案，还在寻找解释为什么会发生这种情况。尽管代码解决方案可能会出现，但它无法自我解释。

Answer 1

$timeout 是 setTimeout() 的 angular 化版本，即它的编码方式会触发摘要循环。 setTimeout() 是一个普通的 Javascript 函数，它对 Angular 或摘要循环一无所知。因为setTimeout()不是简单的JS对象，所以Angular不能$watch。

因此，拥有像 $timeout 这样的功能的全部意义在于它们是某些 Javascript 功能的 angular 友好版本。

Answer 2

$timeout() 和 setTimeout() 不一样，$timeout 是 angularised.

它在内部使用 promise ($q service)，它会在每个摘要周期后自动解析。而 setTimeout() 只是在队列中注册回调函数的一个技巧。

如果您希望 setTimeout() 成为摘要循环的一部分，请在 $scope 内调用它。$apply():

setTimeout(function(){
    $scope.$apply(function(){
        $scope.username = "Test User name";
    });
}, 3000));

Answer 3

一个更通用的解释是 setTimeout 在 angular 内部不起作用，因为它把它的回调放在事件循环上，angular 不观察。如果您直接创建 XMLHttpRequest 而不是 $http.

，则会发生相同的情况。

Angular 已经对这些 utilities/objects 进行了自己的抽象，因此当它们完成时，摘要循环将获取任何更改。

如何正确使用AngularJS摘要循环

How to properly use the AngularJS digest cycle

javascript

angularjs

angularjs-digest