小编典典

Angular完成向DOM添加范围更新后,如何触发方法?

angularjs

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

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

我可以使用setTimeout()添加一个难看的延迟,但这不能保证DOM确实已经准备好。

我的问题是,有什么方法可以绑定到“已渲染”的事件?

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/

提前致谢!


阅读 358

收藏
2020-07-04

共1个答案

小编典典

$evalAsync队列用于一个需要出现当前堆栈帧外的时间表工作,但浏览器的视图之前渲染。- http://docs.angularjs.org/guide/concepts#runtime

好吧,那么什么是“堆栈框架”?Github评论揭示了更多:

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

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

因此, 如果使用指令中的$evalAsync将代码放入队列中,则它应在Angular操纵DOM之后但在浏览器呈现之前运行。如果您需要在浏览器渲染后或控制器更新模型后运行某些程序,请使用$timeout(...,0);

另请参见,该示例还提供了一个使用$evalAsync()的小提琴示例。

2020-07-04