Я использую маршруты в AngularJS, который отображает другое представление, основанное на параметре, то есть параметр URL. У меня есть представление, в котором отображается слайдер. К сожалению, ползунок не создается или не запускается при отображении нового представления. Как я могу запустить этот javascript при отображении нового представления? Нужно ли создавать новую директиву?
AngularJS:
angularApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/',
{
templateUrl:'/pages/default.html'
}).
when('/:params',
{
templateUrl: function(params){
params.param = params.params.replace(':', '');
return '/pages/'+params.param; }
});
}]);
Slick Slider JS:
$(window).load(function(){
$('.slickSlider').slick({
slidesToShow: 4,
arrows: true,
infinite: true,
autoplay: true,
slidesToScroll: 1
});
Обычно speaking- не рекомендуется комбинировать jQuery & Angular, когда дело доходит до последовательности загрузки... это немного беспорядочно. Лучше используйте один из них.
Для вашей конкретной проблемы я бы использовал "контроллер как", увиденный в этой теме SO и на контроллерах init, чтобы вызвать нужные функции.
Все, что вам нужно сделать, это создать функцию инициализации внутри вашего контроллера. Ниже приведен пример того, как это будет выглядеть. Когда инициализируется представление, он вызывает контроллер, в котором вызывается функция $ scope, и ваш JS-код плагина может работать.
=== AngularJS ===
angularApp.controller('blog', function($scope){
$scope.init = function()
{
$('.slickSlider').slick({
slidesToShow: 4,
arrows: true,
infinite: true,
autoplay: true,
slidesToScroll: 1
});
}
$scope.init();
});
=== HTML ===
<div ng-controller="blog"></div>
Я выполнил некоторый рефакторинг кода, чтобы обеспечить более смысловую и четкость.
Когда представление загружено, оно выдает событие: $ viewContentLoaded означает, что DOM загружен, тогда вы можете безопасно инициализировать плагины jQuery.
angularApp.config(['$routeProvider',
function Router($routeProvider) {
'use strict';
$routeProvider
.when('/:params', {
templateUrl: function(params) {
params.param = params.params.replace(':', '');
return '/pages/' + params.param;
},
controller: 'ParamsCtrl',
controllerAs: 'paramsCtrl'
});
}
]);
angularApp.controller('ParamsCtrl', ['$scope',
function ParamsCtrl($scope) {
'use strict';
var paramsCtrl = this, //the controller
$ = jQuery; //safe alias to jQuery
//if your content is inside ng-include,
//use: $scope.$on('$includeContentLoaded')
//emitted every time the ngInclude content is reloaded
$scope.$on('$viewContentLoaded', function() {
$('.slickSlider').slick({
slidesToShow: 4,
arrows: true,
infinite: true,
autoplay: true,
slidesToScroll: 1
});
});
}
]);
Проверьте этот полезный ответ: AngularJS Partial HTML не может использовать jquery lib
Вы можете добавить атрибут onload
в элемент ng-view
который вы используете для представления.
например <div ng-view onload='startSlider()'
>
то рефакторинский слайдер будет просто
function startSlider(){
$('.slickSlider').slick({
slidesToShow: 4,
arrows: true,
infinite: true,
autoplay: true,
slidesToScroll: 1
};
initialize
в контроллер для этого конкретного представления, которое выполняет ваш код slickSlider?