AngularJS and jQuery plugin after render

angularjs, javascript, jquery

Solution

You can make your swiper initiate (or update) on an event:

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({});
     })
   }
 };

});

And have either each slide trigger it (effectively updating the slider for each new slide) or only trigger it when the ng-repeat is finished (using the $last property in the ng-repeat's $scope).

Alternatively, you don't need to create a directive for this, just use ng-init to run an update function, for instance:

<div class="swiper-slide" ng-repeat="group in groups" ng-init="updateSwiper($last)">

and have a corresponding function on the parent scope:

var swiper = angular.module('ng-swiper', ['qbusService'])
 .directive('swiper', function(){

 return {
   link : function(scope, element, attrs) {
     scope.updateSwiper = function(bool){
       if (bool) element.swiper({});
     }
   }
 };

});

Problem

I'm building a slider, and I'm using the ng-repeat directive to iterate a (RESTful) service to create the slides in the slider. I've wrapped the slider in a custom directive to initialize it when it's done (ie. in the link function). ``` var swiper = angular.module('ng-swiper', ['qbusService']) .directive('swiper', function(){ return { link : function(scope, element, attrs) { $(element).swiper({}); } }; }); ``` However the slider is not initialized correctly, am I missing something? HTML: ``` <div class="swiper-container" swiper> <div class="swiper-wrapper"> <!-- for each group --> <div class="swiper-slide" ng-repeat="group in groups"> <ul class="small-block-grid-2"> <li ng-model="output" ng-repeat="output in group.Outputs" ng-switch on="output.TypeName" class="tile {{output.TypeName}}"> <a href="" data-reveal-id="outputModal{{output.ID}}"> <i class="foundicon-idea block" ng-switch-when="dimmer1t"></i> <i class="foundicon-idea block" ng-switch-when="dimmer2t"></i> <i class="foundicon-clock block" ng-switch-when="timer1"></i> <i class="foundicon-smiley block" ng-switch-default></i> <h2>{{output.CustomName}}</h2> </a> <!-- Output Modal Box --> <div id="outputModal{{output.ID}}" class="reveal-modal xlarge" ng-switch on="output.TypeName"> <h2>{{output.CustomName}}</h2> <i class="foundicon-idea block" ng-switch-when="dimmer1t"></i> <i class="foundicon-idea block" ng-switch-when="dimmer2t"></i> <i class="foundicon-clock block" ng-switch-when="timer1"></i> <i class="foundicon-smiley block" ng-switch-default></i> <div class="switch large"> <input id="x" ng-click="turnOff(output)" name="switch-x" type="radio" checked> <label for="x">Off</label> <input id="x1" ng-click="turnOn(output)" name="switch-x" type="radio"> <label for="x1">On</label> <span></span> </div> <a class="close-reveal-modal">&#215;</a> </div> </li> </ul> </div> </div> </div> ```

Original source