如何在 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

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 排队等待执行的代码何时运行，以及 DOM 何时被 Angular 更新.我建议您之前也阅读 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 进行排队，它应该在 DOM 被 Angular 操作之后，但在浏览器呈现之前运行.如果您需要在浏览器渲染后或控制器更新模型后运行某些内容，请使用 $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屋！