當服務範圍在服務內更改時更新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完成並返回可變數據返回給調用函數將被調用的函數。簡單&有效。