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">×</a>
</div>
</li>
</ul>
</div>
</div>
</div>
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({});
}
}
};
});
try to wrapping it around with on ready event of jQuery
var swiper = angular.module('ng-swiper', ['qbusService'])
.directive('swiper', function(){
return {
link : function(scope, element, attrs) {
$(function() {
$(element).swiper({});
});
}
};
});
Try wrapping in $timeout to give browser a chance to finish painting the DOM once angular compile process is done:
var swiper = angular.module('ng-swiper', ['qbusService'])
.directive('swiper', function($timeout){
return {
link : function(scope, element, attrs) {
$timeout(function(){
$(element).swiper({});
},10)
}
};
});