jQuery的bxslider不工作+ JS角NG-重复的问题 [英] Jquery bxslider not working + Angular js ng-repeat issue

问题描述

我工作的一个角的js项目中，我得到的术语数量，我使用的纳克重复，以显示在前端的每一项。正常工作。我已经在 BX滑块（jQuery的响应bxslider）表明，它们

I'm working on a Angular js project where I get number of terms and i'm using ng repeat to show each term in the front end .it works fine.I have shown them in a bx slider (jquery responsive bxslider)

以下将主要code。

的Javascript code

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

HTML code

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

我可以看到所有的条款都是加载很好，但当我点击箭头键滑块不起作用
。我想不通的issue.I'm pretty确定问题是与 NG-重复即可。因为当我删除NG-重复，只是添加一些图片/分隔的＆LT; D​​IV CLASS =slider4＆GT;＆LT; / DIV＆GT; 正常工作

I can see all the terms are loaded nicely but when I click arrow keys slider doesn't work .I can't figure out the issue.I'm pretty sure the problem is with ng-repeat. Because when i remove ng-repeat and just add some images/divs to the <div class="slider4"></div>it works fine.

能有人帮帮我吗？这是为什么不工作？ 它是一个平局回到角的js ？我能不能达到我的目标是什么？

Can some one help me? Why is this not working? Is it a draw back in Angular js?Can't I achieve my goal?

推荐答案

bxSlider不起作用，因为jQuery的执行你的NG-重复完成之前。

bxSlider doesn't work because the jQuery executes before your ng-repeat has finished.

您可以使用类似finishingmoves'指令执行的函数NG重复完成之后。

You can use something like finishingmoves' directive to execute a function after ng-repeat has finished.

该指令是：

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指令：<一href=\"https://stackoverflow.com/questions/15207788/calling-a-function-when-ng-repeat-has-finished\">Calling当NG-重复完成功能）

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

You can see an example of it here: http://jsfiddle.net/paulocoelho/BsMqq/4/

希望有所帮助，不要忘记投票！

Hope that helps and don't forget to vote!

这篇关于jQuery的bxslider不工作+ JS角NG-重复的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！