Angular Richtlinie nicht Element des Intervalls zur Aktualisierung mit

Question

I dieser Richtlinie haben

angular.module('mydirectives').directive('slideShow', function ($interval) { 
return{ 
    scope:{slideShow:'=slideShow'}, 
    link:function(scope, element, attrs){   

     element.css("background-size","cover"); 
     element.css("background-repeat","none"); 
     element.css("background-position","center center"); 
     element.css("background-blend-mode","color"); 
     element.css("background-color","rgba(0, 0, 0, 0.5)"); 

     scope.index=0; 

     function nextSlide() 
     { 
      if(!scope.slideShow) return; 
      if(scope.slideShow.sources.length===0) return; 

      var url=scope.slideShow.sources[scope.index++]; 
      if(scope.index>=scope.slideShow.sources.length) scope.index=0; 

      element.css({'background-image': 'url(' + url +')'}); 
     } 

     nextSlide(); 
     var interval= $interval(nextSlide,3000) 
     scope.$on("$destroy",function(){ 
      $interval.cancel(interval); 
     }) 
    } 
} 
}); 

dies ist, wie ich es anwenden

<section class="primary" slide-show="slideShow"> 

nun die Steuerung, die Eigenschaft „Diashow“ liefert den Wert über HTTP-Anforderung erhält. wenn es wieder mit Antwort kommt wird der Wert, auf Bildschirm wie diese

$scope.slideShow={sources:["http:\\sources\someimage.jgp"]} 
webApi.getHomePageModel().then(function(model){ 
    $scope.model=model; 
    $scope.slideShow=model.slideShow;   
},function(error){ 
    console.dir(error); 
}); 

Das Problem: wenn dieser läuft nur den Standardwert Diashow Werke und Hintergrund-Bild des Elements gesetzt ist, aber nach der Reaktion auf http die new value wird auf slideShow gesetzt, aber die Funktion when interval "nextSlide" wird ausgeführt und das Hintergrundbild wird nicht aktualisiert. Im Debugger kann ich sehen, dass die URL-Werte korrekt aufgenommen werden, das Element jedoch nicht aktualisiert wird. BEARBEITEN: Ich machte einen dummen Fehler, das aktualisierte Modell war nicht wie erwartet die Elemente in Quellen waren keine Zeichenfolgen wie erwartet (sie wurden als komplexe Objekte statt String-Wert generiert.) Alle arbeiten jetzt. auch nicht nötig Umfang $ applyAsync, da der Dienst $ interval behandelt das für Sie

Answer 1

Wenn Sie setInterval verwenden, dann müssen Sie erneut ausführen Winkel des digetst Zyklus manuell.

function nextSlide() 
    { 
     if(!scope.slideShow) return; 
     if(scope.slideShow.sources.length===0) return; 

     var url=scope.slideShow.sources[scope.index++]; 
     if(scope.index>=scope.slideShow.sources.length) scope.index=0; 

     element.css({'background-image': 'url(' + url +')'}); 

     scope.applyAsync(); //this line! 
     //May not work in older angular versions, if such you should use scope.apply() 

    } 

Answer 2

Ich habe es funktioniert mit dieser Implementierung

angular.module('app').directive('slideShow', function ($interval) { 
return{ 
    scope:{slideShow:'=slideShow'}, 
    link:function(scope, element, attrs){   
     var index=0; 


     function nextSlide() 
     { 
      if(!scope.slideShow) return; 
      if(scope.slideShow.images.length===0) return; 

      var url=scope.slideShow.images[index++]; 
      if(index>=scope.slideShow.images.length) index=0;    
      element.css({'background-image': 'url(' + url +')'}); 
     } 

     var interval=false; 
     var watchSlideShow=scope.$watch("slideShow",function(){ 
      if(!scope.slideShow) return; 
      if(scope.slideShow.images.length===0) return; 
      if(interval) return; 

      nextSlide(); 
      var interval= $interval(nextSlide,5000); 
     }); 

     scope.$on("$destroy",function(){ 
      $interval.cancel(interval); 
      watchSlideShow(); 
     }); 
    } 
} 
});