Jquery bxslider无法正常工作+ Angular js ng-repeat问题

我正在开发一个Angular js项目，我得到了一些术语，我正在使用ng repeat来显示前端的每个术语。 它运行正常 。我已经在bx滑块中显示它们（jquery响应bxslider）

以下将是主要代码。

Javascript代码

 $(document).ready(function(){ $('.slider4').bxSlider({ slideWidth: 300, minSlides: 2, maxSlides: 3, moveSlides: 1, slideMargin: 10 }); });  

HTML代码

 
 
 {{term.name}}
  

我可以看到所有条款都很好地加载 但当我点击箭头键滑块不起作用 。我无法弄清楚问题。我很确定问题是ng-repeat 。 因为当我删除ng-repeat并只是将一些图像/ 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/