Если вы работаете с Angular, возможно, у вас будет случай, когда вы захотите вызвать какую-нибудь библиотеку JQUERY, чтобы она что-то для вас сделала. Обычный способ - вызвать функцию JQUERY на готовой странице:
$(function(){
$(element).someJqueryFunction();
});
Если ваш element контент динамически добавляется с помощью Angular, то этот подход не очень хорош, как я понял, и вам нужно создать пользовательскую директиву, чтобы реализовать эту функциональность.
В моем случае я хочу загрузить bxSlider для элемента <ul class="bxslider">, но содержимое элемента <ul> должно быть загружено с использованием директивы angular ng-repeat.
Имена изображений собираются с помощью REST-сервиса из базы данных.
Я вызываю свою директиву startslider, используя следующий код:
<div startslider></div>
Моя пользовательская директива Angular: (pictures является переменной в $scope, переданной от моего контроллера, который вызывает службу REST)
application.directive('startslider', function () {
return {
restrict: 'A',
replace: false,
template: '<ul class="bxslider">' +
'<li ng-repeat="picture in pictures">' +
'<img ng-src="{{siteURL}}/slide/{{picture.gallery_source}}" alt="" />'
'</li>' +
'</ul>',
link: function (scope, elm, attrs) {//from angular documentation, the link: function should be called in order to change/update the dom elements
elm.ready(function () {
elm.bxSlider({
mode: 'fade',
autoControls: true,
slideWidth: 360,
slideHeight:600
});
});
}
};
});
В результате я получаю все изображения из базы данных, отображаемые на моем экране, но без загруженного bxSlider (все изображения отображаются одно под другим).
Обратите внимание, что bxSlider работает, потому что когда я вызываю $(element).bxSlider(); для кода, написанного вручную, слайдер загружается.
Почему это происходит?
