3

我正在 Ruby on Rails 上编写一个应用程序,使用 AngularJS 进行资源管理(动态加载等)和 JQuery 用于手风琴、淡入淡出等效果。

当我想在页面上显示我的数据时,我使用 Angular JS 控制器从资源中查询数据,然后使用 ng-repeat 和 ng-show 相应地显示它们。完成后,我需要设置 JQuery onclick 事件以添加效果(具体为手风琴)。不幸的是,我找不到在加载所有 DOM 组件以及完成所有 Angular 消化时将调用的事件。这意味着 JQuery 的 onload 事件不起作用,并且还尝试使用诸如ng-repeat 完成事件之类的指令,该指令 会产生一个错误,该错误已在进行中。

AngularJS 很新,我很难找到好的文档。

有没有人有任何想法?谢谢!

4

2 回答 2

3

在使用 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 操作之前需要使用间隔 = 0 的 $timeout,例如在小提琴或手风琴中初始化工具提示。

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

于 2013-04-22T18:06:51.143 回答
2

You can put your jQuery code inside $apply, like this:

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

if it fires error like "digest in progress", you can use setTimeout:

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

Directive way:

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

Hope it helps, Cheers

于 2013-04-22T16:38:21.480 回答