Скрипт jQuery Swiper, който да се изпълнява след зареждане на Ng-Repeat елементи

Преди да навлезете в това как да направите това да работи, повечето от тези типове jQuery добавки не работят добре с angular, тъй като те правят модификации на DOM, за които angular не знае.

Като се има предвид това, трикът е отлагането на извикването на плъгина jQuery, докато Angular изобрази DOM.

Първо, поставете своя плъгин за swiper в директива:

.directive('swiper', function($timeout) {
    return {
        link: function(scope, element, attr) {
            //Option 1 - on ng-repeat change notification
            scope.$on('content-changed', function() {
                new Swiper(element , {
                    direction: 'horizontal',
                    pagination: '.swiper-pagination',
                    paginationClickable: true);
            }
            //Option 2 - using $timeout
            $timeout(function(){
                new Swiper(element , {
                    direction: 'horizontal',
                    pagination: '.swiper-pagination',
                    paginationClickable: true);
            });

        }
    };
})

За Вариант 1 се нуждаете от модифицирана директива isLoaded

myApp.directive('isLoaded', function (){

   return{
     scope:false, //don't need a new scope
     restrict: 'A', //Attribute type
     link: function (scope, elements, arguments){ 

        if (scope.$last) {
            scope.$emit('content-changed');
            console.log('page Is Ready!');
        }
     }   
   }
})

И накрая, вашето маркиране (обърнете внимание на промяната от isLoaded на is-loaded... това вероятно е причината да не виждате известието).

<div ng-init="initGetRequestMain()" swiper>

   <div ng-repeat="slide in data.slides" is-loaded>
       <div class="swiper-slide" style="{{slide.background}}" 
                   ng-click="swipers()"></div>
   </div>
</div>

Както споменахме, повечето jQuery плъгини, които изпълняват функцията на въртележката, не се справят много добре с промените в DOM (т.е. нови елементи). Дори и при двете опции може да видите неочаквани неща, ако промените модела си след първото изобразяване на ng-repeat. Въпреки това, ако вашият модел е статичен, това трябва да работи за вас. Ако вашият модел се промени, тогава може да искате да потърсите по-„ъглова“ директива за въртележка.

Има още по-лесен начин, който можете да използвате, който е вграден в Swiper.js. Когато инициализирате swiper, просто задайте свойството наблюдател на true. Това ще накара Swiper да следи за промени във вашите слайдове, така че няма да се налага да се притеснявате дали работи, преди всички слайдове да бъдат добавени чрез ng-repeat.

Пример:

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

И от документацията на Swiper за свойството наблюдател:

Задайте true, за да активирате Mutation Observer на 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.us Swiper в AngularJS проект. Вместо това потърсете Angular библиотека, която прави същата работа. Ако тогава бях умел като сега, никога нямаше да го използвам, особено за нещата $(document).ready. Вместо това проучете Promises или AngularJS как да направите това. Бях напълно нов в AngularJS и уеб разработката като цяло, така че взех грешни решения.

Надявам се да съм била полезна.