Load the JSON file from local by ANgularJS controller and pass it to ANgularJS custom directive scope

Question

I am stuck in here. I went through few tutorials and Stack overflow questions and answers like here.

• AngularJS: factory $http.get JSON file
• Fetchin data from local JSON FIle in angularjs
• Passing data to a directive asynchronously obtained in a controller

But I can't resolve my problem. Basically what I want to do here is just read the JSON file from my local and pass it into my custom directive scope.

my html

<div ng-app="myApp" ng-controller="Ctrl" >
    <bars-chart chart-data="myData"></bars-chart>
</div>

script

var app = angular.module('myApp',[]);
app.controller('Ctrl', function($scope, $http){
    $http.get('practice.json')
    .then(function(resource){
    $scope.myData = resource.data;               
    });
}); 
//directive 
app.directive('barsChart', function(){
var rectBar = {
    restrict : 'EA',
    replace : true,
    scope : {data:'=chartData'},
    link : function(scope, element, attr){
        var barColor = 'steelblue';

//doing some other stuff

        }
    };
    return rectBar;
});

when I debug in directive scope I can't get the scope.data that's why I get error when I try to do some stuff wit scope.data. But its works fine when I hard coded in my controller like

app.controller('Ctrl', function($scope,) {
  $scope.myData = [
                    {"State":"AL","freq":{"low":4786, "mid":1319, "high":249}}
                    ,{"State":"AZ","freq":{"low":4786, "mid":1319, "high":418}}
                    ];
});

note: I run my index.html file into python server by creating from command line python -m http.server

Answer 1

But its works fine when I hard coded in my controller

Your code looks ok except you get $scope.myData by async way and your directive doesn't know about.

You can define watcher inside directive that will listen on data change

Something like:

 var cancelWatch = scope.$watch(function () {
        return scope.data;
    },
    function (newVal, oldVal) {
        if (newVal !== undefined ) {
            run();
            cancelWatch();  // in case if you want kill watcher
            }
    });

Demo

---

Full directive:

app.directive('barsChart', function(){
var rectBar = {
    restrict : 'EA',
    replace : true,
    scope : {data:'=chartData'},
    link : function(scope, element, attr){
        var barColor = 'steelblue';

     function run(){
       console.log(scope.data);
     }

     var cancelWatch = scope.$watch(function () {
        return scope.data;
    },
    function (newVal, oldVal) {
        if (newVal !== undefined ) {
            run();
            cancelWatch();
            }
    });


        }
    };
    return rectBar;
});