javascript - 当服务内部范围发生变化时更新 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
        })
                  }
      }}])

有一个点击操作 markDone 调用 MandateService 来更新 $scope 值

如果我在服务中添加 console.log 来检查 $scope 中的值，则 $scope.progress 值会更新，但它不会在 HTML 中更新。我已经尝试了提到的一些技术，但没有一个有帮助

我尝试添加 $scope.$apply() 但收到错误 $digest 已在进行中 sol1 sol2

Answer 1

您不应该在服务内访问 $scope，而应该让您的服务函数返回您将在 Controller 中更新 $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;
                })
            }
        }
}]);