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

当我打开它的时候

$(document).ready()

我没有结果。

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

没有帮助。

是否有办法在ng-repeat填充完成后立即执行函数?我读了一个关于使用自定义指令的建议,但我不知道如何使用ng-repeat和我的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的人来说,它会导致另一个完全不必要的消化周期

其他回答

我是这样做的。

创建指令

function finRepeat() {
    return function(scope, element, attrs) {
        if (scope.$last){
            // Here is where already executes the jquery
            $(document).ready(function(){
                $('.materialboxed').materialbox();
                $('.tooltipped').tooltip({delay: 50});
            });
        }
    }
}

angular
    .module("app")
    .directive("finRepeat", finRepeat);

在你把它添加到这个ng-repeat的标签上之后

<ul>
    <li ng-repeat="(key, value) in data" fin-repeat> {{ value }} </li>
</ul>

然后在ng-repeat结束时运行。

<div ng-repeat="i in items">
        <label>{{i.Name}}</label>            
        <div ng-if="$last" ng-init="ngRepeatFinished()"></div>            
</div>

我的解决方案是添加一个div来调用一个函数,如果项目是repeat中的最后一个。

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

<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槽字体呈现购物清单中的购物项目时。

这里是一个重复完成指令,当为真时调用指定的函数。我发现被调用的函数在做DOM操作之前必须使用interval=0的$timeout,比如在呈现的元素上初始化工具提示。jsFiddle: http://jsfiddle.net/tQw6w/

在美元范围。layoutDone,试着注释掉$timeout行和取消注释“NOT CORRECT!”行,看看工具提示中的区别。

<ul>
    <li ng-repeat="feed in feedList" repeat-done="layoutDone()" ng-cloak>
    <a href="{{feed}}" title="view at {{feed | hostName}}" data-toggle="tooltip">{{feed | strip_http}}</a>
    </li>
</ul>

JS:

angular.module('Repeat_Demo', [])

    .directive('repeatDone', function() {
        return function(scope, element, attrs) {
            if (scope.$last) { // all are rendered
                scope.$eval(attrs.repeatDone);
            }
        }
    })

    .filter('strip_http', function() {
        return function(str) {
            var http = "http://";
            return (str.indexOf(http) == 0) ? str.substr(http.length) : str;
        }
    })

    .filter('hostName', function() {
        return function(str) {
            var urlParser = document.createElement('a');
            urlParser.href = str;
            return urlParser.hostname;
        }
    })

    .controller('AppCtrl', function($scope, $timeout) {

        $scope.feedList = [
            'http://feeds.feedburner.com/TEDTalks_video',
            'http://feeds.nationalgeographic.com/ng/photography/photo-of-the-day/',
            'http://sfbay.craigslist.org/eng/index.rss',
            'http://www.slate.com/blogs/trending.fulltext.all.10.rss',
            'http://feeds.current.com/homepage/en_US.rss',
            'http://feeds.current.com/items/popular.rss',
            'http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml'
        ];

        $scope.layoutDone = function() {
            //$('a[data-toggle="tooltip"]').tooltip(); // NOT CORRECT!
            $timeout(function() { $('a[data-toggle="tooltip"]').tooltip(); }, 0); // wait...
        }

    })

没有必要创建一个指令,特别是为了有一个ng-repeat完成事件。

Ng-init会为您带来魔力。

  <div ng-repeat="thing in things" ng-init="$last && finished()">

$last确保,当最后一个元素被呈现给DOM时,finished才会被触发。

不要忘记创建$scope。完成事件。

编码快乐! !

编辑:2016年10月23日

如果你还想在数组中没有项的情况下调用完成的函数,那么你可以使用下面的解决方法

<div style="display:none" ng-init="things.length < 1 && finished()"></div>
//or
<div ng-if="things.length > 0" ng-init="finished()"></div>

只需在ng-repeat元素的顶部添加上面的行。它将检查数组是否没有任何值,并相应地调用函数。

E.g.

<div ng-if="things.length > 0" ng-init="finished()"></div>
<div ng-repeat="thing in things" ng-init="$last && finished()">