AngularJS:在$ scope。$ digest之后立即触发一个事件

时间:2012-08-24 02:09:55

标签: events scope angularjs digest complete

在我的AngularJS应用程序中,有几点我想等待$ scope处理到DOM中,然后在其上运行一些代码,例如jquery fadeIn。

有没有办法侦听某种digestComplete消息?

我当前的方法是,在设置我想要渲染的任何$ scope变量后立即使用延迟为0 ms的setTimeout,这样它就会让范围完成消化,然后运行完美的代码。唯一的问题是,我偶尔会在setTimeout返回之前看到DOM渲染。我想要一种方法,保证在摘要之后和渲染之前触发。有什么想法吗?

3 个答案:

答案 0 :(得分:15)

在这个jQuery fade-in-and-out fiddle(我在JSFiddles Examples wiki页面上找到它)中,作者定义了一个“fadey”指令并在指令的链接中执行jQuery fadeIn(或fadeOut) 功能“

<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)

另一种可能的解决方案是使用$evalAsync:请参阅Miško的this comment,其中声明:

  

asyncEval是在DOM构造之后但在浏览器呈现之前。   我相信这是你想要附加jquery插件的时间。除此以外   你会闪烁的。如果你真的想在浏览器渲染后做   你可以做$ defer(fn,0);

($ defer被重命名为$ timeout)。

但是,我认为使用指令(因为你正在操纵DOM)是更好的方法。

这是一个SO post,其中OP试图在范围上监听$ viewContentLoaded事件(这是另一种选择),以便应用一些jQuery函数。建议/答案再次使用指令。

答案 1 :(得分:3)

或者,此示例的工作方式与AngularJS内置的 ng-show 指令相同,但淡入淡出基于AngularJS条件:

<li ng-repeat="item in items" ng-ds-fade="{condition}">
<!-- E.g.: ng-ds-fade="items.length > 0" -->
...
myApp.directive('ngDsFade', function () {
  return function(scope, element, attrs) {
    element.css('display', 'none');
    scope.$watch(attrs.ngDsFade, function(value) {
      if (value) {
        element.fadeIn(200);
      } else {
        element.fadeOut(100);
      }
    });
  };
});

来源: http://www.codeproject.com/Articles/464939/Angular-JS-Using-Directives-to-Create-Custom-Attri

答案 2 :(得分:1)

如果您只想运行一些jQuery的东西,为什么不试试Angular-UI jQuery Passthrough?