mercredi 22 juin 2016

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>

Aucun commentaire:

Enregistrer un commentaire