AngularJS and jQuery plugin after render

Question

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>

You don't need to wrap you element in jQuery ($(element)...). If you remove it, are you facing an error? — Caio Cunha
– Caio Cunha, Commented Mar 26, 2013 at 12:19
@CaioToOn It doesn't throw an error, but it doesn't solve the problem either :) — Gilles De Mey
– Gilles De Mey, Commented Mar 26, 2013 at 12:25

Tiago Roldão · Accepted Answer · 2013-03-26 13:04:00Z

4

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

});

answered Mar 26, 2013 at 13:04

Tiago Roldão

10.7k3 gold badges32 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gilles De Mey Over a year ago

Awesome, this is exactly what I was looking for! It keeps my directive nicely seperated from my controller logic and avoids using dirty work-arounds.

Tiago Roldão Over a year ago

There is also the added perk of it updating with your content - you can add/delete a slide and know that the slider will update accordingly :)

migontech · Accepted Answer · 2013-03-26 12:13:37Z

1

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

});

answered Mar 26, 2013 at 12:13

migontech

1,53013 silver badges18 bronze badges

Comments

charlietfl · Accepted Answer · 2013-03-26 12:15:33Z

0

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

});

edited Mar 26, 2013 at 12:15

answered Mar 26, 2013 at 12:10

charlietfl

172k14 gold badges125 silver badges154 bronze badges

4 Comments

Gilles De Mey Over a year ago

It says $timeout is not defined, weird.

charlietfl Over a year ago

did you inject it as argument in directive? Will be undefined otherwise

Gilles De Mey Over a year ago

Increasing the timeout to around 200ms did the trick, but I really don't like like this sort of (dirty) approach. Will mark your answer as correct if no no better alternative comes up.

charlietfl Over a year ago

if takes that long chances are is delay due to data from server? Other ways to delay compiler using resolve in config also.

Collectives™ on Stack Overflow

AngularJS and jQuery plugin after render

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related