How to render a directive only after data is loaded from tsv in angular js
angularjs, csv, d3.js, javascript
Solution
put an if control in your watch to check if your data item is ready to go or not
directives.directive('d3Bar', [function() {
return {
restrict : 'E',
scope : {
data : '='
},
link : function(scope, element) {
scope.$watch('data', function(newData, oldData) {
if(newData){
drawLine(newData);
}
}, true);
}
}
}])
Problem
I want to integrate d3.js and angularjs. I have to draw a ling graph. Data is loaded from tsv file. I am having problem in rending the graph and error is that data has not yet been loaded and graph is rendered. I want to that when data is loaded in scope variable, graph should be rendered else not. Please help. Here is code of controller ``` phonecatControllers.controller('MainCtrl', ['$scope', function($scope) { d3.tsv("sample.tsv", function(error, data) { $scope.d3Data = data; }); }]); ``` And here is directive code ``` directives.directive('d3Bar', [ function() { return { restrict : 'E', scope : { data : '=' }, link : function(scope, element) { scope.$watch('data', function(newData, oldData) { drawLine(newData); }, true); } } ``` } and html is ``` <body ng-controller='MainCtrl'> <d3-bar data='d3Data'></d3-bar> </body> ```