скрипт jQuery Swiper для запуска после загрузки элементов ng-Repeat

есть еще более простой способ, которым вы можете использовать, который запечен в Swiper.js. Когда вы инициализируете swiper, просто установите свойство observer в true. Это заставит Swiper следить за изменениями ваших слайдов, поэтому вам не придется беспокоиться о том, работает ли он до того, как все слайды будут добавлены через ng-repeat.

пример:

var galleryTop = new Swiper('.gallery-top', { observer: true });

и из документации Swiper по свойству observer:

установите значение true для включения мутации Наблюдатель на Swiper и его элементов. В этом случае Swiper будет обновляться (повторно инициализироваться) каждый раз, если вы измените его стиль (например, Скрыть/показать) или измените его дочерние элементы (например, добавление/удаление слайдов)

я отвечаю на этот вопрос, потому что некоторые ребята просили меня сделать это и потому что я хочу помочь другим разработчикам этой "смешной" проблемы.

после более чем одного года мне удалось решить эту проблему с помощью Promises и Factories.

по сути, я сделал Factory, ItemFactory сделать, чтобы получить все необходимые элементы (в данном случае слайды), затем я сделал еще один Factory, SwiperFactory, который использует Promise чтобы вызвать этого смешного парня,swipers(). Я назвал все эти заводские методы в MainController, который после получения слайдов и запуска скрипта делает $scope.apply(); чтобы отразить изменения в главном представлении.

Main.HTML-код:

//MainController known as mainCtrl
<div ng-repeat="slide in mainCtrl.slides">
  <div class="swiper-slide" ng-click="mainCtrl.swipers()"></div>
</div>

MainController.js:

angular
.module('myApp')
.controller('MainController', MainController);

function MainController($scope, ItemFactory, SwiperFactory) {

   var vm    = this;
   //Initializing slides as an empty array
   vm.slides = [];

   /** Gets called as soon as the Controller is called **/
   getData('main.json');

   function getData(path){
      ItemFactory.getItems(path).then( function(response){

        //If response is not empty
        if (response) {
           //Assigning fetched items to vm.items
           vm.slides = response.data;
        }

        //Calling triggerSwiper after we ensured fetching item data
        SwiperFactory.triggerSwiper();

        //Callig $scope.$apply() to reflect correctly the changes in the view
        $scope.$apply();
      })
   };

}

ItemFactory.js:

angular
.module('myApp')
.factory('ItemFactory', function ($http) {

    /** Using this referring as ItemFactory Controller **/
    var vm     = this;
    vm.API_URL = 'http://localhost/';

    /** Gets items from API based on jsonPath **/
    function getItems(jsonPath) {
        return $http.get(vm.API_URL + jsonPath
        ).then(function (response) {
            return (response);
        });
    }

    //Exposing getItems method
    return {
        getItems : getItems
    }
});

SwiperFactory.js:

angular
.module('myApp')
.factory('SwiperFactory', function () {

    /** Using this referring as SwiperFactory Controller **/
    var vm     = this;

    /** Triggers Swiper Script 
     *  Resolving only after swiper has been triggered **/
    function triggerSwiper(){
      return new Promise( function(resolve, reject){
        resolve({
            $(document).ready(function (){
                var swiper = new Swiper('.swiper-container',{
                direction           : 'horizontal',
                pagination          : '.swiper-pagination',
                paginationClickable : true
            })
        });

      }, function(error){
         console.log('Error while triggering Swiper');
      })

    }

    //Exposing triggerSwiper method
    return {
        triggerSwiper : triggerSwiper
    }
});

• $scope.$apply(); может быть удален, это не действительно важно
• в общем, такой подход хорошо работает с асинхронными задачами

код выше делает работу, но, пожалуйста, обратите внимание на то, что я говорю ниже

попробуйте избежать использования библиотек jQuery, таких как iDangero.американский Swiper в проекте AngularJS. Вместо этого, найдите угловую библиотеку, которая делает ту же работу. Если бы тогда я был опытным, как сейчас, я бы никогда не использовал его, особенно для $(document).ready материал. Вместо этого изучите обещания или AngularJS способ сделать это. Я был совершенно новичком в AngularJS и веб-разработке в целом, поэтому я принял неправильные решения.

надеюсь, я был полезен.