Jquery bxslider non funziona + Problema angolare js ng-repeat - javascript, jquery, html, angularjs, bxslider

Sto lavorando su un progetto Angular js in cui ottengo il numero di termini e sto usando ng ripetere per mostrare ogni termine nel front-end.funziona bene.Li ho mostrati in a bx slider (bxslider reattivo jquery)

Di seguito sarà il codice principale.

Codice Javascript

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

Codice HTML

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

Vedo che tutti i termini sono caricato bene ma quando clicco i tasti freccia il cursore non funziona .Non riesco a capire il problema.Sono abbastanza sicuro che il problema sia con ng-repeat. Perché quando rimuovo ng-repeat e aggiungo solo alcune immagini/div al <div class="slider4"></div>funziona bene

Qualcuno può aiutarmi? Perché questo non funziona? È un inconveniente in Angular js??Non posso raggiungere il mio obiettivo?

risposte:

7 per risposta № 1

bxSlider non funziona perché jQuery viene eseguito prima che ng-repeat sia terminato.

Puoi usare qualcosa come la direttiva finishmoves" per eseguire una funzione dopo che ng-repeat ha terminato.

La direttiva è la seguente:

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

(direttiva finishmoves da qui: Richiamo di una funzione al termine di ng-repeat)

Puoi vedere un esempio qui: http://jsfiddle.net/paulocoelho/BsMqq/4/

Spero di esserti stato d'aiuto e non dimenticare di votare!

---

1 per risposta № 2

Puoi chiamare il metodo quando la finestra viene caricata in questo modo

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

al posto di

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

---

0 per risposta № 3

Non è la mia soluzione, ma ho pensato di passarla insieme.

Mi piace di più questa soluzione (utilizza i controller direttivi)

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

---