Gilles De Mey Gilles De Mey - 5 months ago 35
Javascript Question

AngularJS and jQuery plugin after render

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>

Answer

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

});