更好的方式来在AngularJS参考$范围 [英] Better way to reference $scope in AngularJS

问题描述

这是我如何我的JS设置：

This is how I have my JS set up:

基本上我有一个页面，该页面上有一个图表。我想有一个装载微调节目的同时图表数据加载。

Basically I have a page, and on that page there is a chart. I want to have a loading spinner show while the chart data is loading.

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-隐藏=加载和`NG-秀=装载，以确保在正确的时间微调和图表展示。

I am using ng-hide="loading" and `ng-show="loading" to make sure the spinner and the chart show at the correct times.

不过，我已经注意到，低于 //在负载通话 - 实际上并不转动加载为false。在SO另一条消息表明有一个更好的方式实现这一目标比通过 $范围左右，所以任何建议将是AP preciated。谢谢你。

However, I've noticed that the call below // On load - doesn't actually turn the loading to false. Another message on SO suggested there is a better way to achieve this than by passing $scope around so any suggestions would be appreciated. Thank you.

推荐答案

这不是一个很好的做法，您的范围对象传递到服务，服务是为了成为无国籍人士。相反，利用的回调 $ HTTP ：

It is not a good practice to pass your scope object to a service, a service is meant to be stateless. Instead utilize the callbacks of the $http:

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

而且，正如格兰迪下面提到的，从你的服务回报您的 $ HTTP 启用回调：

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

我看到一些不好的做法虽然。你不应该从服务中的数据添加到您的DOM，相反还利用这个回调：

I see some more bad practices though. You shouldn't add the data to your DOM from your service, instead utilize also for this the callbacks:

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

控制器：

// 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;
    });
};

有关您的谷歌图表它将使最有意义创建一个指令。

For your google chart it would make most sense to create a directive.

这篇关于更好的方式来在AngularJS参考$范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！