AngularJS, JQuery и OnLoad события

Question

Я пишу приложение на Ruby On Rails с использованием AngularJS для управления ресурсами (динамической загрузки и т.д.) и JQuery эффектов наподобие гармошки, замирание в выходе и т.д.

Когда я хочу, чтобы отобразить мои данные на странице я запрашиваю данные из ресурса с помощью Angular JS-контроллера, а затем я их отображаю соответственно с помощью ng-repeat и ng-show. Когда это будет завершено, мне нужно настроить события JQuery onclick для добавления эффектов (например, Accordion). К сожалению, я не могу найти событие, которое будет вызываться, когда будут загружены все компоненты DOM и когда все Угловое переваривание будет завершено. Это означает, что событие onload JQuery не работает, а также пытается использовать директиву, например ng-repeat finish event , в результате чего возникает ошибка, которая уже переваривается.

AngularJS довольно новый, и у меня возникли трудности с поиском хорошей документации.

Есть ли у кого-нибудь идеи? Спасибо!

Answer 1

Вы можете поместить свой код JQuery внутри $ применяется, например:

$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 

Надеется, что это помогает, Приветствию

Answer 2

Вы должны дождаться завершения ng-repeat перед использованием jQuery для инициализации Аккордеона.

Настоящая директива для этого (http://jsfiddle.net/tQw6w/); он вызывает указанную функцию, когда истинный:

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

Я обнаружил, что $ таймаут с интервалом = 0 прежде чем выполнять манипуляции с DOM, как инициализация всплывающих подсказок в скрипке или ваш Аккордеон.

Ответил ранее здесь: https://stackoverflow.com/a/16142327/2275421