AngularJS et le plugin jQuery après le rendu

Je construis un curseur et j’utilise la directive ng-repeat pour itérer un service (RESTful) afin de créer les diapositives dans le curseur.

J’ai encapsulé le curseur dans une directive personnalisée pour l’initialiser une fois que c’est fait (c’est-à-dire dans la fonction link).

var swiper = angular.module('ng-swiper', ['qbusService']) .directive('swiper', function(){ return { link : function(scope, element, attrs) { $(element).swiper({}); } }; });

Cependant, le curseur n’est pas initialisé correctement.

HTML:

            {{output.CustomName}}
    {{output.CustomName}}
       Off  On  
 ×

Vous pouvez demander à votre swiper d’initier (ou de mettre à jour) un événement:

 var swiper = angular.module('ng-swiper', ['qbusService']) .directive('swiper', function(){ return { link : function(scope, element, attrs) { element.swiper({}); scope.$on("swiper-update", function(){ element.swiper({}); }) } }; });

Et demandez à chaque diapositive de le déclencher (mise à jour effective du curseur pour chaque nouvelle diapositive) ou uniquement lorsque la répétition ng-repeat est terminée (en utilisant la propriété $ last dans la scope $ de la scope de ng-repeat).

Sinon, vous n’avez pas besoin de créer une directive pour cela, utilisez simplement ng-init pour exécuter une fonction de mise à jour, par exemple:

et avoir une fonction correspondante sur la scope parent:

 var swiper = angular.module('ng-swiper', ['qbusService']) .directive('swiper', function(){ return { link : function(scope, element, attrs) { scope.updateSwiper = function(bool){ if (bool) element.swiper({}); } } }; });

essayez de l’envelopper avec l’événement prêt de jQuery

 var swiper = angular.module('ng-swiper', ['qbusService']) .directive('swiper', function(){ return { link : function(scope, element, attrs) { $(function() { $(element).swiper({}); }); } }; });

Essayez d’encapsuler $timeout pour donner à votre navigateur la possibilité de finir de peindre le DOM une fois le processus de compilation angular terminé:

 var swiper = angular.module('ng-swiper', ['qbusService']) .directive('swiper', function($timeout){ return { link : function(scope, element, attrs) { $timeout(function(){ $(element).swiper({}); },10) } }; });