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中的值但是在HTML中没有更新值，则$ scope.progress值会更新。我已经尝试了一些提到的技术，但没有一个帮助

我已尝试添加$ scope。$ apply（）但我收到错误$ digest正在进行中 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完成后调用，并将变量数据返回给调用函数。简单＆amp;有效的。

范围在服务

3 个答案: