javascript - 在 AngularJS 中引用 $scope 的更好方法

Question

这就是我设置 JS 的方式:

基本上我有一个页面，该页面上有一个图表。我希望在加载图表数据时显示加载微调器。

angular.module('myApp', [])
  .service('chartService', ['$http', function($http) {
    var svc = {};
    svc.updateChartData = function($scope) {
      $scope.loading = true;
      $http({method: 'GET', url: 'http://example.com/getjson'})
        .success(function(response) {
          var data = google.visualization.arrayToDataTable(JSON.parse(response));
          var options = {
            ...
        };
      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
      chart.draw(data, options);
      $scope.loading = false;
    });
  }

  return svc;
}])

.controller('PageController', ['$scope', '$http', 'chartService', function($scope, $http, chartService) {
  $scope.loading = true;
  // When select option changes
  $scope.updateData = function() {
    chartService.updateChartData($scope);
  };
}])

.controller('ChartController', ['$scope', '$http', 'chartService', function($scope, $http, chartService) {
  // On load
  chartService.updateChartData($scope);
}]);

我使用 ng-hide="loading" 和 `ng-show="loading"来确保微调器和图表在正确的时间显示。

但是，我注意到 //On load 下面的调用 - 实际上并没有将 loading 变为 false。 SO 上的另一条消息表明，有一种比传递 $scope 更好的方法来实现这一点，因此任何建议将不胜感激。谢谢。

Answer 1

将作用域对象传递给服务并不是一个好的做法，服务应该是无状态的。而是利用 $http 的回调:

chartService.updateChartData().finally(function(){
    $scope.loading = false;
});

并且，正如 Grundy 下面提到的，从您的服务返回您的 $http 以启用回调:

svc.updateChartData = function($scope) {
    return $http({ //.. the options });
}

不过，我还看到了一些不好的做法。您不应该将数据从您的服务添加到您的 DOM，而是为此使用回调:

svc.updateChartData = function($scope) {
    return $http({method: 'GET', url: 'http://example.com/getjson'});
}

Controller :

// When select option changes
$scope.updateData = function() {
    chartService.updateChartData().then(function(data) {
        // success
        // do something with the return data from the http call
    }, function (error) {
        // error
        // handle error
    }).finally (function() {
        // always
        $scope.loading = false;
    });
};

对于您的谷歌图表，创建一个指令是最有意义的。