Question

我正在使用AngularJS编写Ruby on Rails上的应用程序进行资源管理（动态加载等），使用JQuery编写手风琴，淡入淡出等效果。

当我想在页面上显示数据时，我使用Angular JS控制器从资源中查询数据，然后使用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>

和控制器中的功能：

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

我发现需要在执行DOM操作之前使用interval = 0的$ timeout，比如初始化小提琴中的工具提示或手风琴。

此处回答：https://stackoverflow.com/a/16142327/2275421

Answer 2

你可以将你的jQuery代码放在$ apply中，如下所示：

$scope.$apply(function() {
    // jQuery stuff here
});

如果它触发“正在进行摘要”等错误，您可以使用setTimeout：

setTimeout(function(){
    $scope.$apply(function() {
        // jQuery stuff here
    });
 });

指令方式：

//Directive - STRART
.directive("yourNameHere", function() {
    return function(scope, element, attrs) {
        $(element).jQueryStuffHere();
    };
})//Directive -END

希望它有所帮助，干杯

AngularJS，JQuery和Onload事件

2 个答案: