在角度使用json数组整数答案

【问题标题】：using a json array integer in angular在角度使用json数组整数
【发布时间】：2014-08-07 15:55:54
【问题描述】：

我想在 scope.data 中导入一个 json 整数数组以用于人们使用 d3 酒吧，但是当它不起作用时！它会在 scope.data 中获取数组，因为当我在 html 中执行 {{data}} 时，它会显示数组但无法将其用于 d3 条，请帮助！！

 angular.module('myApp', [])
//.controller('SalesController', ['$scope', function($scope, $http){
.controller('SalesController', function($scope, $http) {

/* $http.get('js/todos2.json')
.then(function(res){

      $scope.data = res.data;              
});*/

/*$http({method: 'GET', url: 'js/todos2.json'}).success(function(data)
{
$scope.data = data; // response data 
});*/

$http.get('js/todos2.json').success(function(data) {
   $scope.data = data;
});

/*$scope.data = [Math.random(),12,6,8,15];*/
/*$scope.data = 7*/
$scope.text = ('klopm');
 //parseInt(data)
}).directive('bars', function ($parse) {
  return {
     restrict: 'E',
     replace: true,
     template: '<div id="chart"></div>',
     scope:{data: '=data'},
     link: function (scope, element, attrs) {
       var data = scope.data;
       function drawBars() {
          var chart = d3.select('#chart')
         .append("div").attr("class", "chart")
         .selectAll('div')
         .data(data[0]).enter()
         .append("div")
         .transition().ease("elastic") //had la ligne bantli zayda na9ssa b3da pr l'affichage il faut savoir a quoi sert
         .style("width", function(d) { return d + "%"; })
         .text(function(d) { return d + "%"; });
       }
       drawBars();

     } 
  };
});

【问题讨论】：

标签： javascript arrays json angularjs d3.js

【解决方案1】：

由于您从 json 文件中获取数据，$scope.data 不会立即被填充，您需要观察它以确保在绘制图表之前填充它。在您的指令定义中，您需要确保有数据，而不是立即调用drawBars() 函数。所以像这样的

scope.$watch('data', function(){
    if(!scope.data) return; //If there is no data, do nothing

    //now call your draw function
    drawBars();
})

【讨论】：