Jquery bxslider가 작동하지 않음 + Angular js ng-repeat 문제

Question

Angular js 프로젝트에서 저는 용어의 수를 얻었고 ng를 반복하여 프런트 엔드에 각 용어를 표시합니다. 이 잘 .I이 주요 코드가 될 것이다 다음은 bx slider (jquery responsive bxslider)

에서 그들을 보여 작동합니다.

자바 스크립트 코드

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

슬라이더 작동하지 않는 내가 화살표 키를 클릭하면 내가 모든 조건이 멋지게하지만 를로드 볼 수 있습니다 . 문제를 파악할 수 없습니다. 문제가 0인지 확신합니다.ng-repeat. 왜냐하면 ng-repeat를 제거하고 일부 이미지/div를 <div class="slider4"></div>에 추가하기 때문에 정상적으로 작동합니다.

나를 도와 줄 수 있습니까? 왜 이것이 작동하지 않습니까? Angular js으로 다시 그려지나요? 목표를 달성 할 수 없습니까?

Answer 1

nx-repeat가 끝나기 전에 jQuery가 실행되기 때문에 bxSlider가 작동하지 않습니다.

ng-repeat가 끝난 후 finishingmoves '지시문을 사용하여 함수를 실행할 수 있습니다.

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/

희망 도움과 그렇지 않은

이 지침은 다음과 같다 투표하는 것을 잊어라!

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

Answer 3

를 호출 할 수있는이 솔루션은 최고의 (분류기 지시어 컨트롤러)를 좋아하는 경우의 장소에서이 사용

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

같은 창로드

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