ng-repeat 完成事件

Question

ng-repeat 完成事件

javascriptjqueryangularjsangularjs-ng-repeatdocument-ready

211

我希望调用一些针对含有表格的div的jQuery函数。该表格是由ng-repeat填充的。

当我在...（此处省略）

$(document).ready()

我没有任何结果。

另外

$scope.$on('$viewContentLoaded', myFunc);

有没有办法在 ng-repeat 完成后立即执行函数？我读到了一个使用自定义 directive 的建议，但是我不知道如何将它与 ng-repeat 和我的 div 一起使用...

- ChruS

15个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JoshuaDavid · Answer 1

这是对其他答案中表达的思想的改进，以展示如何在使用声明性语法和隔离作用域（Google推荐的最佳实践）与元素指令时访问ngRepeat属性（$ index，$ first，$ middle，$ last，$ even，$ odd）。请注意主要区别：scope.$parent.$last。

angular.module('myApp', [])
.directive('myRepeatDirective', function() {
  return {
    restrict: 'E',
    scope: {
      someAttr: '='
    },
    link: function(scope, element, attrs) {
      angular.element(element).css('color','blue');
      if (scope.$parent.$last){
        window.alert("im the last!");
      }
    }
  };
});

- bresleveloper · Answer 2

我想补充另一个答案，因为之前的回答都认为在ngRepeat完成后需要运行的代码是Angular代码，在这种情况下，以上所有答案都提供了很好且简单的解决方案，有些更通用，如果重要的话，您可以查看Ben Nadel的博客，关于digest生命周期阶段，链接为此处，但是根据我的经验，正如OP所述，通常会在最终编译的DOM上运行一些JQuery插件或方法，在这种情况下，我发现最简单的解决方案是创建一个带有setTimeout的指令，因为setTimeout函数被推到浏览器队列的末尾，它总是在Angular中的所有操作之后执行，通常是ngReapet，它在其父级postLinking函数之后继续。

angular.module('myApp', [])
.directive('pluginNameOrWhatever', function() {
  return function(scope, element, attrs) {        
    setTimeout(function doWork(){
      //jquery code and plugins
    }, 0);        
  };
});

如果有人想知道为什么不使用$timeout，那是因为它会导致另一个完全不必要的脏检查循环。

- João Paulo · Answer 3

在ng-repeat结束后使用MathJax渲染公式，以上答案都没有解决我的问题，所以我像下面这样做。这不是一个好的解决方案，但对我有用...

<div ng-repeat="formula in controller.formulas">
    <div>{{formula.string}}</div>
    {{$last ? controller.render_formulas() : ""}}
</div>

- Blomersi · Answer 4

我在这里找到了一个答案，虽然它已经被很好地实践过了，但仍需要添加延迟。

创建以下指令：

angular.module('MyApp').directive('emitLastRepeaterElement', function() {
return function(scope) {
    if (scope.$last){
        scope.$emit('LastRepeaterElement');
    }
}; });

将其作为属性添加到您的重复器中，就像这样：

<div ng-repeat="item in items" emit-last-repeater-element></div>

根据Radu的说法：

$scope.eventoSelecionado.internamento_evolucoes.forEach(ie => {mycode});

对我来说它可以工作，但我仍然需要添加一个setTimeout

$scope.eventoSelecionado.internamento_evolucoes.forEach(ie => {
setTimeout(function() { 
    mycode
}, 100); });

- user4808836 · Answer 5

如果您只是想更改类名以便呈现不同的效果，下面的代码就可以实现。

<div>
<div ng-show="loginsuccess" ng-repeat="i in itemList">
    <div id="{{i.status}}" class="{{i.status}}">
        <div class="listitems">{{i.item}}</div>
        <div class="listitems">{{i.qty}}</div>
        <div class="listitems">{{i.date}}</div>
        <div class="listbutton">
            <button ng-click="UpdateStatus(i.$id)" class="btn"><span>Done</span></button>
            <button ng-click="changeClass()" class="btn"><span>Remove</span></button>
        </div>
    <hr>
</div>

当我有类似的需求时，这段代码对我很有效，可以将我的购物清单中的已购买商品以删除线字体呈现。