AngularJS：在$ scope之后立即触发事件$ digest [英] AngularJS: Fire an event immediately after $scope.$digest

问题描述

在我的AngularJS应用程序中，我想要等待一个$ scope被处理到DOM中，然后运行一些代码，比如一个jquery fadeIn，几个点。

有没有办法听取一些digestComplete消息呢？

我现在的方法是，在设置了我想要渲染的任何$ scope变量之后立即使用setTimeout，延迟为0 ms，这样可以让范围完成消化，然后运行代码，这是完美的。唯一的问题是，我非常偶尔看到DOM渲染之前setTimeout返回。我想要一种在消化之后和渲染之前保证触发的方法。任何想法？

解决方案

在这个 jQuery fade-in-and-out fiddle （我发现它在 JSFiddles示例 wiki页面），作者定义了一个fadey指令，并在指令的链接函数中执行jQuery fadeIn（或fadeOut） / p>

 < li ng-repeat =项目fadey =500> 
 ... 
 myApp.directive（'fadey'，function（）{
 return {
 restrict：'A'，
 link：function（scope，elm，attrs）{
 var duration = parseInt（attrs.fadey）; 
 if（isNaN（duration））{
 duration = 500; 
} 
 elm = jQuery（elm）; //此行如果jQuery在Angular 
 elm.hide（）; 
 elm.fadeIn（duration）
  

$ b $之前加载，则不需要b

另一个可能的解决方案是使用 $ evalAsync ：请参阅Miško的此评论，他在其中指出：

asyncEval是在DOM构建之后，但在浏览器呈现之前。
我相信这是你想附加jQuery插件的时间。否则
你会闪烁。如果你真的想在浏览器后面渲染
，你可以执行$ defer（fn，0）;

但是，我认为使用一个指令（因为你正在操纵DOM）是更好的方法。

这是一个 SO post ，其中OP尝试监听范围上的$ viewContentLoaded事件（这是另一个选择），以便应用一些jQuery函数。建议/答案再次使用指令。

In my AngularJS app, there's several points at which I want to wait for a $scope to be processed into the DOM, and then run some code on it, like a jquery fadeIn, for example.

Is there a way to listen for a digestComplete message of some sort?

My current method is, immediately after setting whatever $scope variables I want rendered, use setTimeout with a delay of 0 ms, so that it will let the scope finish digesting, and then run the code, which works perfectly. Only problem is, I very occasionally see the DOM render before that setTimeout returns. I'd like a method that is guaranteed to fire after digest, and before render. Any ideas?

解决方案

In this jQuery fade-in-and-out fiddle (which I found it on the JSFiddles Examples wiki page), the author defines a "fadey" directive and performs the jQuery fadeIn (or fadeOut) in the directive's link function"

<li ng-repeat="item in items" fadey="500">
...
myApp.directive('fadey', function() {
return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
        var duration = parseInt(attrs.fadey);
        if (isNaN(duration)) {
            duration = 500;
        }
        elm = jQuery(elm); // this line is not needed if jQuery is loaded before Angular
        elm.hide();
        elm.fadeIn(duration)

Another possible solution is to use $evalAsync: see this comment by Miško, in which he states:

The asyncEval is after the DOM construction but before the browser renders. I believe that is the time you want to attach the jquery plugins. otherwise you will have flicker. if you really want to do after the browser render you can do $defer(fn, 0);

($defer was renamed $timeout).

However, I think using a directive (since you are manipulating the DOM) is the better approach.

Here's a SO post where the OP tried listening for $viewContentLoaded events on the scope (which is yet another alternative), in order to apply some jQuery functions. The suggestion/answer was again to use a directive.

这篇关于AngularJS：在$ scope之后立即触发事件$ digest的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！