javascript - Angular-检测范围的变化

Question

我有一个服务可以为我抓取 JSON 数据并将其传递给 Controller ​​:

服务片段:

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

Controller 成功获取数据，我已使用 $scope.d3Data = data; 行下的 console.log 对其进行了测试。

Controller 片段:

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'));
}]);

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

这很令人困惑，因为当我将数据数组硬编码到 Controller 中时，类似这样的事情......

$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. 我尝试在 Controller 中的 $scope.d3Data = data; 行之后添加手动 $scope.$apply() 。奇怪的是，我第一次这样做时就有效了，但之后每次刷新页面时我都会收到“$digest已经在进行中”错误(这是预料之中的......)。<
2. 为了修复 $digest 错误，我尝试将 $apply 函数封装在 $timeout 代码块中，甚至可怕的 $$phase 条件。这两个解决方案都修复了控制台错误，但未能解决将数据从 Controller 传递到指令的原始问题。

TL;DR:我完全迷路了。关于接下来在哪里进行故障排除的想法？

Answer 1

看来您两次将响应视为 promise 。所以一旦进入服务:

  .then(function(result) {

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

并在 Controller 中再次解决 promise :

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

这可以工作，因为(根据我的理解)Angular 有时会在绑定(bind)到作用域时自动解析 Promise。

最好只在 Controller 中处理 promise 。所以服务就变成了:

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'));
}]);