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.

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

Maxim Shoustin · Accepted Answer · 2017-09-05 09:33:45Z

2

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

edited Sep 5, 2017 at 9:33

answered Sep 5, 2017 at 9:28

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Maxim Shoustin Over a year ago

@downvoter please describe what is wrong with my answer

R.A.Munna Over a year ago

thanks @Maxim Shoustin. Will you little bit explain how cancelWatch() work? and $scope.data set to newVal. Here I noticed when I call cancelWatch(), $scope,data may undefined as you describe your answer async way data get.

Maxim Shoustin Over a year ago

@R.A.Munna multiple watchers is expensive item and if you have 2000 watchres - it can slow down your site. Sometimes if you want to update your directive once only - you can kill watcher. $scope.$watcher returns cancel callback. So once we got scope.data we kill it by calling cancelWatch() method

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related