angularjs - 当 Angular 完成向 DOM 添加范围更新时，如何触发方法？

Question

我正在寻找一种在向 $scope 变量(在本例中为 $scope.results)添加更改后执行代码的方法。我需要这样做是为了调用一些遗留代码，这些代码要求项目位于 DOM 中才能执行。

我的真实代码是触发 AJAX 调用，并更新作用域变量以更新 ui。因此，目前我的代码在推送到作用域后立即执行，但遗留代码失败，因为 dom 元素尚不可用。

我可以使用 setTimeout() 添加一个丑陋的延迟，但这并不能保证 DOM 真正准备好。

我的问题是，有什么方法可以绑定(bind)到“渲染”之类的事件吗？

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

myApp.controller("myController", ['$scope', function($scope){
    var resultsToLoad = [{id: 1, name: "one"},{id: 2, name: "two"},{id: 3, name: "three"}];
    $scope.results = [];

    $scope.loadResults = function(){
        for(var i=0; i < resultsToLoad.length; i++){
            $scope.results.push(resultsToLoad[i]);
        }
    }

    function doneAddingToDom(){
        // do something awesome like trigger a service call to log
    }
}]);
angular.bootstrap(document, ['myApp']);

模拟代码链接:http://jsfiddle.net/acolchado/BhApF/5/

提前致谢!

Answer 1

The $evalAsync queue is used to schedule work which needs to occur outside of current stack frame, but before the browser's view render. -- http://docs.angularjs.org/guide/concepts#runtime

好吧，那么什么是“堆栈框架”？ Github 评论揭示了更多内容:

if you enqueue from a controller then it will be before, but if you enqueue from directive then it will be after. -- https://github.com/angular/angular.js/issues/734#issuecomment-3675158

上面，Misko 正在讨论 $evalAsync 排队等待执行的代码何时运行，与 Angular 何时更新 DOM 相关。我建议您也阅读之前的两条 Github 评论，以获取完整的上下文。

因此，如果代码使用指令中的 $evalAsync 进行排队，那么它应该在 Angular 操作 DOM 之后、浏览器渲染之前运行。如果您需要在浏览器渲染后或 Controller 更新模型后运行某些内容，请使用 $timeout(..., 0);

另请参阅https://stackoverflow.com/a/13619324/215945 ，其中还有一个使用 $evalAsync() 的示例 fiddle 。