Jquery bxslider 不工作 + Angular js ng-repeat 问题答案

【问题标题】：Jquery bxslider not working + Angular js ng-repeat issueJquery bxslider 不工作 + Angular js ng-repeat 问题
【发布时间】：2014-06-12 23:14:25
【问题描述】：

我正在开发一个 Angular js 项目，在该项目中我获得了多个术语，并且我正在使用 ng repeat 在前端显示每个术语。效果很好.我已经在bx slider (jquery responsive 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 的一个缺点？我不能实现我的目标吗？

【问题讨论】：

标签： javascript jquery html angularjs bxslider

【解决方案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');
            });
        }
    }
    }
});

（此处的finishingmoves指令：Calling a function when ng-repeat has finished）

你可以在这里看到一个例子：http://jsfiddle.net/paulocoelho/BsMqq/4/

希望对您有所帮助，别忘了投票！

【讨论】：

【解决方案2】：

不是我的解决方案，但我想我会通过它。

我最喜欢这个解决方案（利用指令控制器）

// 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/

【讨论】：

【解决方案3】：

你可以在像这样使用窗口加载时调用方法

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

代替

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

【讨论】：

【解决方案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
             });
        });
    }

【讨论】：