angularjs - 我如何知道范围更改何时传播到 View ？

Question

如果我在 Angular 模型中执行变量赋值:

$scope.foo = 1;

根据我刚刚在模型上设置的新值，我如何知道 View 何时完全更新？

(我问这个的原因是，在实践中，我正在向 $scope.foo 提供一个相当大的数据结构，即使在强大的台式机上更新屏幕上的 View 也需要几秒钟的时间，所以，我正在寻找了解何时可以安全地从屏幕上删除加载动画的方法)

Answer 1

这个问题的“真实”答案是:

“你不能”

当您对 Angular 中的模型进行更改时，您完全不知道需要多少 $digest() 调用才能完全实现 DOM。

假设您有一个非常大的数组 foos - 它有 100 万个元素。

在您的标记中，您执行以下操作:

<div ng-repeat="foo in foos"><div ng-if="foo.somecondition">I'm a visible foo!></div></div>

在您的 Controller 中，您设置 foos:

.controller('myController', function($scope, $fooService) {
    $scope.foos = $fooService.get();
    $timeout(function(){
        //foo array done?  Not quite!!!!
    });
});

(get() 在这个例子中不是异步的，它立即返回 foos 数组)。

在 Controller 构造函数运行后，$digest() 将(最终)由 Angular 运行。这个摘要循环将在 DOM 中生成一百万行(这将花费很长时间并且会在 DOM 被修改时锁定浏览器)。在摘要的末尾，如果您在 Controller 中使用 $timeout，您的 $timeout 函数将被触发，但 DOM 尚未完全构建。

如果在那一刻检查 DOM，您会发现您有一百万行，但内部 ng-if 还没有被评估。在第一个摘要周期结束时，Angular 会注意到需要另一个摘要周期，它会直接运行下一个摘要周期 - 在评估 $timeout 之后。

当然，这是一个相当人为的例子。如果您异步加载数据等，情况会更糟。

我建议真正的问题是您的 foo 数据太大 - 在不知道您的实现细节的情况下，我无法提供太多帮助来帮助您弄清楚如何更好地管理问题。

关键是在 Angular 中， 你只关心模型的状态，而不是 DOM 的状态 .

如果我要尝试显示一百万个 foos 的数组，为了保持浏览器响应，我会这样做:

.controller('myController', function($scope, $fooService) {
    $scope.loading = true;
    $scope.foos = [];

    var length = $fooService.length;  //1,000,000 foos
    var i = 0;

    var loadFoos = function() {
        var count = 0;
        while(count < 10) {
            $scope.foos.push($fooService.get(i + count++));
            if(i + count == length) {
                $scope.loading = false;  //we're done!
                return;
            }
        }
        i += count;
        //note, using setTimeout vs. $timeout deliberately - I want each digest cycle to completely finish and return the control of the execution context to the browser.
        setTimeout(function(){
            $scope.$apply(function() {
                loadFoos();
            }, 0);
        })
    };

    loadFoos();  //kick things off.

});

我正在做的是一次加载 foos 10，然后在此期间将控制权返回给浏览器。您现在可以使用 $scope.loading 标志来指示 foos 仍在加载，并且一切都会起作用。我很快就把它放在一起作为一个例子来说明这一点 - 我相信有办法让它更优雅一点，它甚至可能有一些语法错误。

如果我是“真正的”这样做，我可能会将这个功能包装到服务本身中。