Jquery bxslider無效+ Angular js ng-repeat問題

Question

我正在開發一個Angular js項目，我得到了一些術語，我正在使用ng repeat來顯示前端的每個術語。 它運行正常 。我已經在bx滑塊中顯示它們（jquery響應bxslider）

以下將是主要代碼。

Javascript代碼

  <script type="text/javascript">
    $(document).ready(function(){
      $('.slider4').bxSlider({
        slideWidth: 300,
        minSlides: 2,
        maxSlides: 3,
        moveSlides: 1,
        slideMargin: 10
      });
    });
     </script>

HTML代碼

<div class="slider4">
    <div ng-repeat="term in terms" >  {{term.name}}</div>   
  </div>

我可以看到所有條款都很好地加載 但當我點擊箭頭鍵滑塊不起作用 。我無法弄清楚問題。我很確定問題是ng-repeat 。 因為當我刪除ng-repeat並只是將一些圖像/ div添加到<div class="slider4"></div>它可以正常工作。

有人能幫我嗎？ 為什么這不起作用？ 它是Angular js的縮減嗎？我不能實現我的目標嗎？

Answer 1

bxSlider不起作用，因為jQuery在ng-repeat完成之前執行。

在ng-repeat完成后，你可以使用finishmoves'指令之類的東西來執行一個函數。

該指令如下：

var module = angular.module('testApp', [])
.directive('onFinishRender', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element, attr) {
        if (scope.$last === true) {
            $timeout(function () {
                scope.$emit('ngRepeatFinished');
            });
        }
    }
    }
});

（finishmoves指令來自此處： ng-repeat完成后調用函數 ）

你可以在這里看到它的一個例子： http ： //jsfiddle.net/paulocoelho/BsMqq/4/

希望有所幫助，不要忘記投票！

Answer 2

你可以像這樣使用窗口加載時調用方法

$(window).bind("load", function() {  
 });

代替

$(document).ready(function(){
});

Answer 3

不是我的解決方案，但我想我會把它傳遞給我。

我最喜歡這個解決方案（利用指令控制器）

// slightly modified from jsfiddle

// bxSlider directive
controller: function() {},
link: function (scope, element, attrs, controller) {
    controller.initialize = function() {
        element.bxSlider(BX_SLIDER_OPTIONS);
    };
}

// bxSliderItem directive
require: '^bxSlider',
link: function(scope, element, attrs, controller) {
    if (scope.$last) {
        controller.initialize();
    }
}

http://jsfiddle.net/CaioToOn/Q5AcH/8/

Answer 4

在ng-repeat中調用$ last對象上的任何函數（例如：initBxslider（））

<div ng-repeat="term in terms" >  
  {{term.name}}
  <span ng-init="$last && data.initBxslider()"></span>
</div> 

在控制器中：

 $scope.initBxslider = function () {
        $timeout(function () {
            $('.slider4').bxSlider({
               slideWidth: 300,
               minSlides: 2,
               maxSlides: 3,
               moveSlides: 1,
               slideMargin: 10
             });
        });
    }