2

私はangularjsのパーシャル内でjqueryプラグインを使用しようとしています。

指令： 

app.directive('slideit',function() {
    return function(scope, elm, attrs) {
        elm.bxSlider({
          adaptiveHeight: true,
          mode: 'fade'
        });
    };
});

HTML： 

<div id="sliderwrapper" >
    <ul class="slider" slideit>
        <li ng-repeat="image in dealer.images"><img ng-src="{{image}}" alt="" /></li> 
    </ul>
</div>

出力は、bxSlider（）がディレクティブで正常に実行されていることを示しています。ただし、リストやタグは変更されません。通常のAngularJSコードを使用しますが、jQueryプラグインは使用しません。

私が間違っているのは何ですか？

4

4 に答える 4

2

問題はタイミングにあると思います。「slideit」ディレクティブは、リストがレンダリングされる前に呼び出され、その後、ngRepeatによって完全に再描画され、bxSliderはこれが発生していることを疑うことさえありません。

この仮説を検証するためだけに（これは非常に醜く、モデルが変更されても機能しない可能性があるため、本番環境では使用しないでください）。

app.directive('slideit',function() {
    return function(scope, elm, attrs) {
        setTimeout(function() {
            elm.bxSlider({
              adaptiveHeight: true,
              mode: 'fade'
            });
        }, 100);
    };
});

ここにはもっと大きな問題があります。AngularとJQueryの両方でHTMLを「コンパイル」しようとしているのですが、必ずしも互換性があるとは限りません。衝突を避けるために、ディレクティブ内でリストを手動でレンダリングしてから、動的に構築されたDOMでbxSliderを呼び出すことをお勧めします。きれいではありませんが、もっと安定しているはずです。元：

<ul slideit="dealer.images"></ul>

指令：

app.directive('slideit',function() {
    return function(scope, elm, attrs) {
        scope.$watch(attrs.slideit, function(images) {
            var html = '';
            for (var i = 0; i < images.length; i++) {
                 html += '<li><img ng-src="' + images[i] + '" alt="" /></li>';
            }
            elm[0].innerHTML = html;
            elm.bxSlider({
              adaptiveHeight: true,
              mode: 'fade'
            });
        });
    };
});

（私はこれをテストしていません、それはただのアイデアです）

于 2013-01-07T17:34:56.387 に答える
1

これは機能します。ng-repeatディレクティブ内にあります。要素のbxSlider開始ready()。

app.directive('slideit',function() {
    return {
       restrict: 'A',
       replace: true,
       scope: {
         slideit: '=' 
       },
       template: '<ul class="bxslider">' +
                   '<li ng-repeat="slide in slides">' +
                     '<img ng-src="{{slide.src}}" alt="" />' +
                   '</li>' +
                  '</ul>',
       link: function(scope, elm, attrs) {
          elm.ready(function() {
            scope.$apply(function() {
                scope.slides = scope.slideit;
            });                    
            elm.bxSlider({
              adaptiveHeight: true,
              mode: 'fade'});   
            });
       }
    }; 
});

HTML：

<div slideit="images"></div>

編集：ここにplnkrがあります。

于 2013-01-07T17:27:40.160 に答える
0

それを理解しました：
次のディレクティブを追加します： 

app.directive("mySlider", function() {
    return {
        restrict: 'E',
        replace: true,
        scope: true,
        template: '<ul class="slider"><li check-last ng-repeat="image in dealer.images"><img ng-src="{{image}}" alt="" /></li></ul>'
    };
});
app.directive('checkLast', function () {
        return function (scope, element, attrs) {
            //console.log(scope.$position);
            if (scope.$last=== true) {
                element.ready(function () {
                    $('.slider').bxSlider({
                      mode: 'fade',
                      pager: false
                    });    
                })
            }
        }
    });
于 2013-01-07T17:16:47.653 に答える
0

ファイルjsファイルの依存関係を維持するだけです！

 <script src="/yii-application/frontend/web/js/libraries/angular/angular.min.js"></script>
 <script src="/yii-application/frontend/web/js/libraries/angular/angular-ui.js"></script>
 <script src="/yii-application/frontend/web/js/recordata/country.js"></script>
 <script src="/yii-application/frontend/web/js/libraries/jquery/jquery-1.11.3.min.js"></script>
  <script src="/yii-application/frontend/web/js/libraries/flex/jquery.bxslider.min.js"></script>
  <script src="/yii-application/frontend/web/assets/e3dc96ac/js/bootstrap.min.js"></script>
  <script src="/yii-application/frontend/web/js/libraries/jquery-ui/jquery-ui.min.js"></script>
  <script src="/yii-application/frontend/web/js/searchResult.js"></script>
  <script src="/yii-application/frontend/web/js/Flight.js"></script>

以下のように!!!!

于 2015-08-10T05:43:44.767 に答える