Question

我在图像上有类似/不同的功能。喜欢/不同是使用ng-class切换。单击该图标，它将进行服务调用并切换状态。但是，这并没有反映在ui上。

我的 html 是：

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

我的js看起来像

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

我认为，您的问题是您的服务（'myService'）发送了一些http请求。并且在收到http响应后，angularJS不会启动脏检查。你应该在你的回调中做到这一点。

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

有一个例子：https://jsfiddle.net/aL5sqs31/2/。我试图创建一些虚拟myService。它设置超时而不是http请求，但概念是相同的

angularjs在行动后没有刷新客户端

1 个答案: