Angular Treemap 从服务传递数据

Question

此链接上有一个 d3 树图代码 -

http://jsfiddle.net/cyril123/h0q6xb45/1/

现在 this 中的数据是静态的，即它在控制器的范围内，但没有从任何地方加载。所以我编写了一项服务-

app.service('grabdata', function($http){
var data = [];
$http.get('someApi').then(function success(response){
var company = [];
var wtdCagr = [];
var children = [];
for(var i=0;i<response.data.length;i++){
  company.push(response.data[i].companies);
  wtdCagr.push(response.data[i].wtdcagr);
  children.push({name:response.data[i].companies, value: 3241});
}
  data.push({name:"flare", children:children});
});
return {
getData: function(){
  return data[0];
   }
  };
});

我已经设置了控制器-

app.controller('myController', ['$scope', '$http','grabdata', function($scope, $http, grabdata) {
  $scope.$watch(grabdata.getData, function(change){
  $scope.data = change;
  }, true);
}]);

我稍微编辑了指令-

return {
  restrict: 'EA',
  scope: {data: '='},

  link: function(scope, elem, attrs) {
    scope.$watch(scope.data, function(newValue){
      console.log(newValue);
      var root = scope.data;

    });
   var root = scope.data;

但我在控制台上收到此错误-

TypeError: Cannot read property 'length' of undefined

这意味着数据没有进入指令，我做错了什么？

Answer 1

好的，让我为你重写一些东西，这样你就可以尝试告诉我是否可以：

 //service    
 app.service('grabdata', function($http, $q){
  var data = [];
  return({
     getData:getData
  });

 function getData(){
   var defer = $q.defer();
   $http.get('someApi').then(function success(response){
   var company = [];
   var wtdCagr = [];
   var children = [];
   for(var i=0;i<response.data.length;i++){
     company.push(response.data[i].companies);
     wtdCagr.push(response.data[i].wtdcagr);
     children.push({name:response.data[i].companies, value: 3241});
   }
   data.push({name:"flare", children:children});
   defer.resolve(data[0]);
   return defer.promise;
 }
});



//controller
 app.controller('myController', ['$scope', '$http','grabdata', function($scope, $http, grabdata) {
    var $scope.data = [];
    grabdata.getData().then(function(response){
        $scope.data = response;
    });
    $scope.$watch($scope.data, function(newData,oldData){
       if(newData !== oldData){//workout some logic since this is array or object ??
           $scope.data = newData;
       }
    }, true);

 }]);

$http 服务调用是异步的，你需要向对数据感兴趣的一方返回 Promise，当 Promise 解决后你会得到你的数据。我没有说明为什么您的对象长度未定义，只需确保存在 response.data 即可。我建议阅读有关异步数据处理的内容，您的生活会更轻松。如果您想这样做，您还可以返回 $http.get('/someapi') 并在控制器中处理数据