jquery - AngularJS、JQuery 和 Onload 事件

Question

我正在 Ruby on Rails 上编写一个应用程序，使用 AngularJS 进行资源管理(动态加载等)，使用 JQuery 实现 Accordion 、淡入淡出等效果。

当我想在页面上显示数据时，我使用 Angular JS Controller 从资源中查询数据，然后使用 ng-repeat 和 ng-show 相应地显示它们。完成后，我需要设置 JQuery onclick 事件来添加效果(具体来说是 Accordion )。不幸的是，我找不到在加载所有 DOM 组件以及完成所有 Angular 消化时调用的事件。这意味着 JQuery 的 onload 事件不起作用，并且还尝试使用类似 ng-repeat finish event 的指令。该错误会产生一个正在消化的错误。

AngularJS 相当新，我很难找到好的文档。

有人有什么想法吗？谢谢!

Answer 1

在使用 jQuery 初始化 Accordion 之前，您必须等到 ng-repeat 完成。

这是执行此操作的指令( http://jsfiddle.net/tQw6w/ )；当 true 时，它​​调用指定的函数:

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

和 html:

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

以及 Controller 中的函数:

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

我发现在进行 DOM 操作之前需要 $timeout 和 Interval=0 ，例如在 fiddle 或 Accordion 中初始化工具提示。

之前在这里回答过:https://stackoverflow.com/a/16142327/2275421