我想调用一些jQuery函数针对div表。该表由ng-repeat填充。

当我打开它的时候

$(document).ready()

我没有结果。

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

没有帮助。

是否有办法在ng-repeat填充完成后立即执行函数?我读了一个关于使用自定义指令的建议,但我不知道如何使用ng-repeat和我的div…


当前回答

如果你只是想改变类名,让它以不同的方式呈现,下面的代码可以做到这一点。

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

这段代码适用于我,当我有一个类似的需求,以strick槽字体呈现购物清单中的购物项目时。

其他回答

我必须在ng-repeat结束后使用MathJax渲染公式,上面的答案都没有解决我的问题,所以我做了如下。这不是一个很好的解决方案,但对我来说很有效。

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

我想补充另一个答案,因为前面的答案需要在ngRepeat完成后运行的代码是一个angular代码,在这种情况下,所有的答案都给出了一个伟大而简单的解决方案,有些比其他的更通用,如果它的重要的摘要生命周期阶段,你可以看看本纳德尔的博客,除了使用$parse而不是$eval。

但根据我的经验,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的人来说,它会导致另一个完全不必要的消化周期

这里有一个使用ng-init的简单方法,甚至不需要自定义指令。在某些情况下,它对我来说工作得很好,例如,需要在页面加载时自动滚动ng-repeat项的div到特定项,因此滚动函数需要等到ng-repeat完成对DOM的渲染后才能触发。

<div ng-controller="MyCtrl">
    <div ng-repeat="thing in things">
        thing: {{ thing }}
    </div>
    <div ng-init="fireEvent()"></div>
</div>

myModule.controller('MyCtrl', function($scope, $timeout){
    $scope.things = ['A', 'B', 'C'];

    $scope.fireEvent = function(){

        // This will only run after the ng-repeat has rendered its things to the DOM
        $timeout(function(){
            $scope.$broadcast('thingsRendered');
        }, 0);

    };
});

注意,这只对ng-repeat初始渲染后需要调用一次的函数有用。如果你需要在ng-repeat内容更新时调用一个函数,那么你必须在这个线程上使用一个自定义指令的其他答案之一。

当你检查范围时,这也是必要的。用setTimeout(someFn, 0)来包装你的触发器。setTimeout 0是javascript中被接受的技术,它是我的指令正确运行的必要条件。

也许用ngInit和Lodash的debounce方法更简单一点,不需要自定义指令:

控制器:

$scope.items = [1, 2, 3, 4];

$scope.refresh = _.debounce(function() {
    // Debounce has timeout and prevents multiple calls, so this will be called 
    // once the iteration finishes
    console.log('we are done');
}, 0);

模板:

<ul>
    <li ng-repeat="item in items" ng-init="refresh()">{{item}}</li>
</ul>

更新

还有一个使用三元运算符的更简单的纯AngularJS解决方案:

模板:

<ul>
    <li ng-repeat="item in items" ng-init="$last ? doSomething() : null">{{item}}</li>
</ul>

注意ngInit使用预链接编译阶段——即在处理子指令之前调用表达式。这意味着仍然需要异步处理。