Angular完成向DOM添加范围更新后如何触发方法? [英] How to trigger a method when Angular is done adding scope updates to the DOM?

问题描述

在将更改添加到$ scope变量(在本例中为$ scope.results)之后，我正在寻找一种执行代码的方法.我需要执行此操作以调用一些旧代码，这些旧代码要求项目必须在DOM中才能执行.

I am looking for a way to execute code when after I add changes to a $scope variable, in this case $scope.results. I need to do this in order to call some legacy code that requires the items to be in the DOM before it can execute.

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

My real code is triggering an AJAX call, and updating a scope variable in order to update the ui. So I currently my code is executing immediately after I push to the scope, but the legacy code is failing because the dom elements are not available yet.

我可以使用setTimeout()添加一个难看的延迟，但这不能保证DOM确实准备就绪.

I could add an ugly delay with setTimeout(), but that doesn't guarantee that the DOM is truly ready.

我的问题是，有什么方法可以绑定到类似已渲染"的事件?

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/

预先感谢！

推荐答案

$ evalAsync 队列用于安排要安排的工作需要出现在当前堆栈框架之外，但要在浏览器的视图呈现之前进行. - http://docs.angularjs.org/guide/concepts#runtime

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评论显示了更多内容:

Okay, so what's a "stack frame"? A Github comment reveals more:

如果从控制器入队，它将在命令之前，但如果从指令入队，则将在命令之后. - https://github.com/angular/angular.js/issues/734#issuecomment-3675158

以上，Misko正在讨论何时运行由$ evalAsync排队等待执行的代码，以及Angular更新DOM的时间.我建议也阅读Github的两条评论，以获取完整的上下文.

Above, Misko is discussing when code that is queued for execution by $evalAsync is run, in relation to when the DOM is updated by Angular. I suggest reading the two Github comments before as well, to get the full context.

因此，如果代码使用指令中的$ evalAsync排队，则该代码应在Angular操纵DOM之后但在浏览器呈现之前运行.如果需要在浏览器渲染后或控制器更新模型后运行某些内容，请使用$timeout(..., 0);

So if code is queued using $evalAsync from a directive, it should run after the DOM has been manipulated by Angular, but before the browser renders. If you need to run something after the browser renders, or after a controller updates a model, use $timeout(..., 0);

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

See also https://stackoverflow.com/a/13619324/215945, which also has an example fiddle that uses $evalAsync().

这篇关于Angular完成向DOM添加范围更新后如何触发方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！