CODEWITHSUNDEEP
angularjsscopedirective
lkartono
lkartono

Reputation: 2393

Angular directive undefined existing scope

I'm currently trying to display some simple parent/children tree data on JSTree plugin. My data are pulled from an API through my controller : 

angular.module('App')
.controller('GroupsCtrl', ['$scope', 'API', function($scope, API) {
  /**
   * Return the list of all groups
   */
  $scope.getAll = function() {
    API.group.query({ element: 'all', json: 'jtree' }, function(groups) {
      $scope.groups = groups;
    });
  }
}]);

The data looks like that : 

[
  { id: "1", parent: "#", text: "parent" },
  { id: "2", parent: "1", text: "child" },
  ...
]

In my directive, here is what I did : 

angular.module('App')
.directive('edTree', function() {
  return {
    restrict: 'E',
    scope: {
      edTreeData: '='
    },
    link: function(scope, element, attrs) {
      element.jstree({
        'core': {
          'data': scope.edTreeData
        }
      });
    }
  };
});

And in my view : 

<ed-tree ed-tree-data="groups"></ed-tree>

I receive my datas correctly from the server. When doing a :

console.log(scope);

inside the directive, I can see edTreeData scope variable being filled with an array of objects (the ones retrieved from the server) :

...
$parent: a.$$childScopeClass.$$childScopeClass
$root: k
edTreeData: Array[26]
this: k
...

However, when I'm trying to access it directly inside the directive as : 

scope.edTreeData

I've got an undefined value. Is there someone already facing the same issue?

Upvotes: 0

Views: 286

Answers (1)

apairet
apairet

Reputation: 3172

Your data is retieved asynchronously. It is highly probable that the server did not respond yet by the time your directive is executed. You will thus need to setup a watch an wait for the data to be available:

Here is the updated link function:

link: function(scope, element, attrs) {
    var unwatch = scope.$watch('edTreeData', function (nv) {
        if (!nv) {
            return;
        }
        element.jstree({
            'core': {
                'data': scope.edTreeData
            }
        });
        unwatch();
    });
}

Upvotes: 1

Related Questions