3

スライダーを作成していて、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>
4

3 に答える 3

4

イベントでスワイパーを開始（または更新）させることができます。

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

});
于 2013-03-26T13:04:00.800 に答える
1

jQueryの準備ができたイベントでそれをラップしてみてください

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

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

});
于 2013-03-26T12:13:37.207 に答える
0

$timeout角度コンパイルプロセスが完了したら、ブラウザにDOMのペイントを終了する機会を与えるためにラップインしてみてください。

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

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

});
于 2013-03-26T12:10:32.673 に答える