javascript - 渲染后的 AngularJS 和 jQuery 插件

Question

我正在构建一个 slider ，我正在使用 ng-repeat 指令迭代一个(RESTful)服务以在 slider 中创建幻灯片。

我已将 slider 包装在一个自定义指令中，以便在它完成时对其进行初始化(即在链接函数中)。

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

 return {
   link : function(scope, element, attrs) {
     $(element).swiper({});
   }
 };

});

但是 slider 没有正确初始化，我是不是漏掉了什么？

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 1

您可以让您的刷卡器启动(或更新)一个事件:

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

});

让每张幻灯片触发它(有效地更新每张新幻灯片的 slider )或仅在 ng-repeat 完成时触发它(使用 ng-repeat 的 $scope 中的 $last 属性)。

或者，您不需要为此创建指令，只需使用 ng-init 运行更新函数，例如:

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

并在父作用域上有相应的函数:

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

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

});