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>

我可以看到所有的方面都很好地加载,但是当我点击箭头键滑块不起作用 .我想不通的issue.I'm相当肯定的问题是NG重复.因为当我删除ng-repeat并只是添加一些图像/ divs <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/

希望有所帮助,不要忘记投票!