Как вы можете запустить Javascript в новом представлении AngularJS

0

Я использую маршруты в 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
  });
  • 1
    Почему бы просто не поместить метод initialize в контроллер для этого конкретного представления, которое выполняет ваш код slickSlider?
  • 0
    @ragerory Это сработало проще всего. Спасибо!
Показать ещё 1 комментарий

4 ответа

1

Обычно speaking- не рекомендуется комбинировать jQuery & Angular, когда дело доходит до последовательности загрузки... это немного беспорядочно. Лучше используйте один из них.

Для вашей конкретной проблемы я бы использовал "контроллер как", увиденный в этой теме SO и на контроллерах init, чтобы вызвать нужные функции.

0

Все, что вам нужно сделать, это создать функцию инициализации внутри вашего контроллера. Ниже приведен пример того, как это будет выглядеть. Когда инициализируется представление, он вызывает контроллер, в котором вызывается функция $ 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>

0

Я выполнил некоторый рефакторинг кода, чтобы обеспечить более смысловую и четкость.

Когда представление загружено, оно выдает событие: $ 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

0

Вы можете добавить атрибут onload в элемент ng-view который вы используете для представления.

например <div ng-view onload='startSlider()' >

то рефакторинский слайдер будет просто

function startSlider(){
  $('.slickSlider').slick({
    slidesToShow: 4,
    arrows: true,
    infinite: true,
    autoplay: true, 
    slidesToScroll: 1
  };
  • 0
    Я попытался добавить предупреждение к событию onload, но ничего не произошло.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню