当服务范围在服务内更改时更新HTML

Question

我有一个html元素，我希望通过不同的操作进行更新。

HTML

<span>{{progress.mandates_transferred}}/{{progress.mandates_count}}</span> 

JS

this.app.controller('appController', ['MandateService', function(MandateService){ 
    MandateService.progress($scope) 

    $scope.MarkDone = function() { 
     MandateService.progress($scope) 
    } 

}]) 
    this.app.service('MandateService' [ 
    '$http', 
    function($http) { 
     var url = 'api/mandate' 
     return { 
     progress: function($scope) { 
      $http.get(url).success(function(data) { 
      $scope.progress = data 
     }) 
        } 
     }}]) 

有它调用MandateService更新$范围值

价值$ scope.progress更新，如果我添加了一个点击动作markDone在服务中使用console.log来检查$ scope中的值，但它不会在HTML中更新。 我试图提到了一些技术，但他们没有帮助

我已经尝试添加$范围。$适用（），但我得到一个错误$消化正在进行中 sol1 sol2

Answer 1

你不应该访问服务中的$ scope，而是让你的服务函数返回你将在你的控制器中更新$ scope的数据。

this.app.controller('appController', ['MandateService', function(MandateService) { 

    $scope.MarkDone = function() { 
     $scope.progress = MandateService.progress(); 
    } 

}]); 


this.app.service('MandateService' ['$http', function($http) { 
     var url = 'api/mandate' 
     return { 
      progress: function() { 
       $http.get(url).success(function(data) { 
        return data; 
       }) 
      } 
     } 
}]); 

Answer 2

您可以使用$broadcast，试试这个：

this.app.controller('appController', ['$scope', '$rootScope','MandateService', function($scope, $rootScope, MandateService){ 
    MandateService.progress($scope) 

    $scope.MarkDone = function() { 
     MandateService.progress($scope) 
    } 

    $rootScope.$on('progress_update', function(event, data){ 
     $scope.progress = data.progress; 
    }); 

}]) 

this.app.service('MandateService' ['$http', '$rootScope', function($http, $rootScope) { 
    var url = 'api/mandate' 
    return { 
    progress: function() { 
     $http.get(url).success(function(data) { 
      $rootScope.$broadcast('progress_update', {progress: data}); 
     }); 
    } 
}}]); 

Answer 3

而其他的答案是正确的，并会取得相同的结果，我会建议使用服务中的回调，可能是我的个人习惯，但它使代码在我看来更加清洁（当然，如果你没有制作意大利面条并最终出现数千次回调，那么你的代码将无法阅读）。

this.app.controller('appController', ['MandateService', function(MandateService) { 

    $scope.progress = {}; 

    $scope.MarkDone = function() { 
     MandateService.progress(function(data){ 
      $scope.progress = data; 
     }) 
    } 

}]) 

this.app.service('MandateService'['$http', function($http) { 
    var url = 'api/mandate' 
    return { 
     progress:function(callback) { 
     $http.get(url).success(function(data) { 
      callback(data); 
     }) 
     } 
    } 
}]) 

在服务回调..你传递一个一旦$ http.get完成并返回可变数据返回给调用函数将被调用的函数。简单&有效。