Jquery bxslider не работи + ъглова js ng-повторение - javascript, jquery, html, angularjs, bxslider

Работя по проект Angular js, където получавам брой термини и използвам не се повтаря за да се покаже всеки термин в предния край.тя работи добре. Показах ги в a 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>

Виждам, че всички условия са заредени хубаво но когато щракнете върху клавишите със стрелка, плъзгачът не работи . Не мога да разбера проблема. Сигурен съм, че проблемът е NG-повторение, Защото когато премахна ng-повторението и просто добавям някои изображения / divs към <div class="slider4"></div>тя работи добре.

Може ли някой да ми помогне? Защо това не работи? Дали това е теглене назад в Angular js? Не мога ли да постигна целта си?

Отговори:

7 за отговор № 1

bxSlider не работи, защото jQuery се изпълнява преди завършването на вашето ng-повторение.

Можете да използвате нещо като директива за довършителни движения ", за да изпълните функция, след като ng-повторението приключи.

Директивата е следната:

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");
});
}
}
}
});

(директива за довършителни движения от тук: Извикване на функция при завършване на ng-repeat)

Можете да видите пример за това тук: http://jsfiddle.net/paulocoelho/BsMqq/4/

Надявам се, че това помага и не забравяйте да гласувате!

---

1 за отговор № 2

Можете да извикате метод, когато се зарежда прозорец като тази употреба

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

вместо

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

---

0 за отговор № 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/

---