角度检测范围的变化

Question

我有一个服务，它为我获取JSON数据并将其交给控制器：

服务片段：

...
getP2PKeywordData: function(global_m, global_y) {

      // Return the promise
      return $http({
                url: base_url + 'get/P2P/kwords/', 
                method: "GET",

                // Set the proper parameters
                params: { 
                  year: global_y,
                  month: global_m
                  }
              })
              .then(function(result) {

                  // Resolve the promise as the data
                  return result.data;
              },
              function(data) {
                  // Error handling
              });
    }
    ...

控制器成功地获取了数据，我已经用console.log在$scope.d3Data = data;行下进行了测试。

控制器片段：

myApp.controller('DownloadsCloudCtrl', ['$scope', 
                                        '$rootScope', 
                                        'requestService',
                                        '$cookieStore',
  function($scope, $rootScope, requestService, $cookieStore) {
  $rootScope.$on('updateDashboard', function(event, month, year) {
    updateDashboard(month, year);
  });

  var updateDashboard = function(month, year) {
    requestService.getP2PKeywordData(month, year).then(function(data) {
      $scope.d3Data = data;
    });
  };

  updateDashboard($cookieStore.get('month'), $cookieStore.get('year'));
}]);

控制器连接到一个d3-cloud指令(d3 word云)，该指令实际上附加了适当的svg元素，并使用数据绘制单词svg。但是，由于某种原因，上面的控制器没有将$scope.d3Data 传递给.指令。

这让人困惑，因为当我将数据数组硬编码到控制器中时，如下所示.

$scope.d3Data = [
    {
        'kword': 'a',
        'count': 20,
    },{
        'kword': 'b',
        'count': 10,
    ...

..。它和指令连接得很好！

指令片段：

myApp.directive('d3Cloud', ['$window', 
                            'd3Service', 
                            'd3Cloud', 
                            function($window, 
                                     d3Service, 
                                     d3Cloud) {
  return {
    restrict: 'EA',
    scope: {
      data: '=',
      label: '@'
    },
    link: function(scope, element, attrs) {
      d3Service.d3().then(function(d3) {
        window.onresize = function() {
          scope.$apply();
        };
        scope.$watch(function() {
          return angular.element($window)[0].innerWidth;
        }, function() {
          scope.render(scope.data);
        });
        scope.render = function(data) {

HTML片段：

<div class="col-md-6">
    <div class="module">
      <div class="inner-module" ng-controller="DownloadsCloudCtrl">
        <div class="module-graph">
          <d3-cloud data="d3Data"></d3-cloud>
        </div>
      </div>
    </div>
  </div>

我试过什么：

1. 我试图在控制器中的$scope.$apply()行之后添加一个手动$scope.d3Data = data;。奇怪的是，这在我第一次这样做的时候就起了作用，但是在每次刷新页面时，我都得到了一个"$digest已经在进行“的错误(这是预料中的.)。
2. 为了修复$digest错误，我尝试将$apply函数封装到$timeout代码块中，甚至是可怕的$$phase条件块中。这两种解决方案都修复了控制台错误，但未能解决将数据从控制器传递给指令的原始问题。

TL;DR:我相当迷茫。关于下一步在哪里排除故障的想法？

Answer 1

你似乎两次把这个反应当作承诺来对待。因此，一旦服务：

  .then(function(result) {

      // Resolve the promise as the data
      return result.data;
  },

在控制器中，您再次解决了这个承诺：

requestService.getP2PKeywordData(month, year).then(function(data) {
  $scope.d3Data = data;
});

这可以工作，因为(据我理解)角有时在绑定到作用域时自动解析承诺。

最好只在控制器中处理这个承诺。因此，这项服务变成：

getP2PKeywordData: function(global_m, global_y) {

      // Return the promise
      return $http({
                url: base_url + 'get/P2P/kwords/', 
                method: "GET",

                // Set the proper parameters
                params: { 
                  year: global_y,
                  month: global_m
                  }
              });
    }

更新：

尝试将d3Data范围属性初始化为空集合，然后将响应数据推入其中。例如：

myApp.controller('DownloadsCloudCtrl', ['$scope', 
                                        '$rootScope', 
                                        'requestService',
                                        '$cookieStore',
  function($scope, $rootScope, requestService, $cookieStore) {

  //added
  $scope.d3Data = [];      

  $rootScope.$on('updateDashboard', function(event, month, year) {
    updateDashboard(month, year);
  });

  var updateDashboard = function(month, year) {
    requestService.getP2PKeywordData(month, year).then(function(data) {

         //then
         angular.forEach(data, function(thing) {

             $scope.d3Data.push(thing);
         )};

    });
  };

  updateDashboard($cookieStore.get('month'), $cookieStore.get('year'));
}]);