15

在我的 AngularJS 应用程序中，有几个点我想等待 a$scope被处理成 DOM，然后在其上运行一些代码，例如 jQuery fadeIn。

有没有办法收听某种“digestComplete”消息？

我目前的方法是：在设置$scope我想要渲染的任何变量后立即使用setTimeout0 毫秒的延迟，这样它就会让作用域完成消化，然后运行代码，效果很好。唯一的问题是，我偶尔会在 setTimeout 返回之前看到 DOM 渲染。我想要一种保证在摘要之后和渲染之前触发的方法。

4

3 回答 3

15

在这个jQuery 淡入淡出小提琴（我在JSFiddles 示例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 的此评论，他在其中指出：

asyncEval 在 DOM 构建之后但在浏览器呈现之前。我相信这是您想要附加 jquery 插件的时候了。否则你会有闪烁。如果你真的想在浏览器渲染后做，你可以做 $defer(fn, 0);

（$defer 更名为 $timeout）。

但是，我认为使用指令（因为您正在操作 DOM）是更好的方法。

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

于 2012-08-24T16:21:28.373 回答
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

于 2013-01-07T17:36:27.693 回答
1

如果你只想运行一些 jQuery 的东西，为什么不试试 Angular-UI jQuery Passthrough？

于 2013-04-13T17:53:09.803 回答