AngularJS passing json to directive

Question

I'm still new in Angular but i'm doing some progress.. i think :) I have problem passing json file from controller to directive using isolated scope.

This is my controller which talk to factory "dataArchive":

.controller('graphCtrl', ['$scope', 'dataArchive', function($scope, dataArchive){
    dataArchive.get().then(function(data){
        $scope.getData = data;
    });
}]);

Then i have directive which is using isolated scope.

.directive('dataGraph', function($compile){
    return {
        restrict: 'AE',
        replace: true,
        scope: {
            getArchiveData: '='
        },
        template: '<div id="chartdiv"></div>',
        link: function (scope, element, attrs){
             var dati = scope.getArchiveData;
             console.log(dati);
        };
     };
 });

And this is my HTML:

<div ng-controller="graphCtrl">
    <data-graph get-archive-data="getData"></data-graph>
</div>

In console i always get 'undefined'.

Where i am wrong and is this a good way?

Thanks you all.

Is the example code correct? You have getArchiveData in the scope definition, but you call scope.getWeatherData() in the the link function. — Narretz
– Narretz, Commented May 9, 2014 at 9:16
I was doing some testing, no no it's scope.getArchiveData. Anyway it's not correct, i get undefined instead of json. — Jack
– Jack, Commented May 9, 2014 at 9:20

Davin Tryon · Accepted Answer · 2014-05-09 09:26:33Z

1

Since this code is async:

dataArchive.get().then(function(data){
        $scope.getData = data;
    });

The link function will run before the data is set on getData, and therefore the isolated scope variable will not be set at this time. So, I believe you are seeing a timing issue.

To make sure that your directive binding is correct. Try to set $scope.getData to a static value (e.g. $scope.getData = [{ data: 'value'}]). This should work.

Also, Angular checks for changes (to rebind) based on object reference. So, you might need to define $scope.getData in the controller (outside of the async call). Then you might want to push all the data in (instead of replace the entire object with the assignment).

Hope this helps.

answered May 9, 2014 at 9:26

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

Collectives™ on Stack Overflow

AngularJS passing json to directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related