Как применить jquery после частичного шаблона AngularJS
У меня есть простой сайт, который реализует jQuery для создания слайдера с некоторыми изображениями в верхнем баннере Index.html.
Теперь я хочу использовать AngularJS, поэтому я разбиваю HTML-код на отдельные части.
- Заголовок
- Footer
- Топ Баннер
Если я запустил Index.html в исходной версии (без применения узоров AngularJS), я вижу, что слайдер работает отлично.
При применении шаблонов AngularJS я переместил верхний баннер HTML в частичный html, а затем применил ng-view в div, где первоначально размещен верхний баннер.
var app = angular.module('website', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.
when('/about',{templateUrl:'app/partials/about.html'}).
when('/contact',{templateUrl:'app/partials/contact.html'}).
otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html'})
});
Когда я обновляю страницу, слайдер не работает, отображается как простой html без какого-либо эффекта jQuery, на самом деле беспорядок.
В этих частицах есть некоторые плагины jQuery, которые обычно активируются document.ready. Но это событие не срабатывает при загрузке angular в ng-view. Как я могу вызвать это событие для инициализации плагинов jQuery?
Какую-либо подсказку, как это исправить?
Оцените любую помощь.
Ответы
Ответ 1
Когда вы укажете свои маршруты, вы также можете указать контроллер, поэтому ваши маршруты будут выглядеть так:
var app = angular.module('website', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.
when('/about',{templateUrl:'app/partials/about.html', controller: 'aboutCtrl'}).
when('/contact',{templateUrl:'app/partials/contact.html', controller: 'contactCtrl'}).
otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html', controller: 'homeCtrl'})
});
Теперь вы можете определить внутри каждого контроллера то, что вы хотите сделать, jquery-wise, как часть функции, например:
angular.module('website').controller('aboutCtrl', ['$scope', function ($scope) {
$scope.load = function() {
// do your $() stuff here
};
//don't forget to call the load function
$scope.load();
}]);
Имеют смысл?
Ответ 2
Другие предоставленные ответы будут работать, но они связаны с контроллерами и, следовательно, не являются масштабируемыми и многоразовыми.
Чтобы сделать это реальным способом "Angular", как указано в комментариях, вы должны использовать директиву. Преимущество этого в том, что вы можете создать несколько экземпляров с одним и тем же кодом и можете передавать атрибуты в директивную логику, чтобы "настроить" эту директиву. Здесь образец пути, который я использовал, используя bxSlider плагин:
JS:
app.directive('slider', ['$rootScope', function($rootScope) {
return {
restrict: 'EA',
templateUrl: '/path/to/template',
link: function(scope, iElement, attrs) {
//attrs references any attributes on the directive element in html
//iElement is the actual DOM element of the directive,
//so you can bind to it with jQuery
$(iElement).bxSlider({
mode: 'fade',
captions: true
});
//OR you could use that to find the element inside that needs the plugin
$(iElement).find('.bx-wrapper').bxSlider({
mode: 'fade',
captions: true
});
}
};
}]);
HTML:
<div slider some-attibute="some-attribute"></div>
И внутри шаблона директивы вы можете иметь оболочку слайдера и слайды, которые вы могли бы динамически строить, используя привязку ng-repeat к данным области.
Я бы рекомендовал прочитать эту отличную статью Дэна Вахлина о создании пользовательских директив и о том, как полностью использовать их полномочия.
Ответ 3
У меня была та же проблема, я загружал некоторые ссылки для навигации в ng-include, и у меня есть файл script, который вызывается на моем index.html с инструкциями jquery, чтобы сделать ссылки активными, и я не вижу включенного содержимого.
Я попробовал все вышеупомянутые решения, и по некоторым причинам ни один из них не работал у меня. Когда содержимое не включено (прямо в index.html), jquery удары в порядке, но после включения он прекратил распознавать мои элементы.
Итак, я просто завернул свои инструкции в функцию setTimeout(), и это сработало! Может быть, это сработает и для вас?
setTimeout(function() {
$("nav ul li").click(function() {
$("nav ul li").removeClass('active');
$(this).addClass('active');
});
});
Каким-то образом setTimeout() управляет загрузкой script ПОСЛЕ angular, выполняется загрузка включенного содержимого.
Счастливое кодирование всех!
Ответ 4
Директива, безусловно, является хорошим вариантом, но вы также можете добавить контроллер к любому частичному, который будет выполнять все задачи (также с помощью jQuery, если хотите) после частичной загрузки:
Пример: partials/menu.html
<div ng-controller="partialMenuCtrl">
...
</div>
Ответ 5
У меня была такая же проблема, я работал с слайдером Jquery slick на простой странице html, и он работал нормально. Как это работает в основном путем включения файла slick.min.js под файлом jquery.min.js, а затем в тегах script вам нужно инициализировать плагин с такими параметрами, как например.
$('.items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
теперь возвращаясь к проблеме, когда я добавил Angular JS на свою страницу и сделал частичную страницу, а затем вернулся в браузер, чтобы проверить погоду, страница работает нормально или нет, страница работает нормально, кроме слайдер. Затем я попытался перенести эти slick.min.js и инициализацию плагина на частичные, и он работал:)
Как это работает Я не знаю причины, так как я новичок в Angular, но это сработало, и мне все еще интересно, почему.
Ответ 6
Я знаю, что это старый поток, но только ради завершения, вы можете использовать следующий код JQuery. Это называется делегированием событий.
$("#anyDivOrDocument").on('click', '#targetDiv', function(event) {
event.preventDefault();
alert( 'working' );
});
Ответ 7
Я купил шаблон html5 и попытался интегрироваться с моим веб-приложением angularJS. Я столкнулся с той же проблемой. Я решил это, используя:
Поместите код ниже, где вы поместите код <script src="vendor/61345/js/script.js"></script>
.
<script>
document.write('<script src="vendor/61345/js/script.js"><\/script>');
</script>