渲染后的 AngularJS 和 jQuery 插件

Question

我正在构建一个滑块，并且我正在使用 ng-repeat 指令迭代（RESTful）服务以在滑块中创建幻灯片。

我已将滑块包装在自定义指令中，以便在完成时对其进行初始化（即在链接函数中）。

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

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

});

但是滑块没有正确初始化，是我遗漏了什么吗？

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

您可以让您的 swiper 启动（或更新）事件：

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

});

让每张幻灯片触发它（有效地为每张新幻灯片更新滑块）或仅在 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({});
     }
   }
 };

});

Answer 2

尝试使用 jQuery 的就绪事件来包装它

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

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

});

Answer 3

尝试在 $timeout 中进行包装，以便在 Angular 编译过程完成后让浏览器有机会完成绘制 DOM：

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

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

});