angularjs Client nicht nach Aktion aktualisieren

Question

Ich habe eine ähnliche/ungleiche Funktionalität auf Bildern. Das like/ungleiche wird mit ng-Klasse umgeschaltet. Wenn Sie auf das Symbol klicken, führt es einen Serviceanruf durch und schaltet den Status um. Dies reflektiert jedoch nicht auf ui.

mein html ist:

<div class="col-sm-4 col-md-4" ng-repeat="result in searchCtrl.searchResults"> 
     <img class="img-responsive" ng-src="http://site.jpg"> 
      <div class="overlay"> 
        <a ng-click="searchCtrl.likeImage(result)"> 
        <span ng-class="'{{searchCtrl.getImageClass(result)}}'"></span></a> 
    </div> 

meine js sieht aus wie

JS

app.controller('SearchController', function(){ 
    this.getImageClass = function(result){ 
      if(result.liked) 
       return 'fa fa-heart fa-4x'; 
      else 
       return 'fa fa-heart-o fa-4x'; 
     }; 

     this.likeImage = function(result){ 
      if(result.liked == false){ 
       myService({'mediaId':result.mediaId}).execute(function(resp) { 
        if(resp && resp.hasOwnProperty('error')) { 
         }else{ 
         result.liked = true; 
         } 
        }); 
      } 
     }; 

Answer 1

Ich denke, Ihr Problem ist, dass Ihr Dienst ('myService') sendet einige http-Anfrage. Und angularJS beginnt nicht mit der Überprüfung nach der HTTP-Antwort. Sie sollten es in Ihrem Rückruf tun.

this.likeImage = function(result){ 
     if(result.liked == false){ 
      myService({'mediaId':result.mediaId}).execute(function(resp) { 
       if(resp && resp.hasOwnProperty('error')) { 
       } 
       else{ 
        result.liked = true;      
       } 
       //pay attention there 
       $scope.$apply(); 
       }); 
     } 
    }; 

Es gibt ein Beispiel: https://jsfiddle.net/aL5sqs31/2/. Ich habe versucht, einen Dummy myService zu erstellen. Es setzt Timeout statt HTTP-Anfrage, aber Konzeption ist das gleiche