Creating Angular Directive say Undefined is not a function

Question

I want to create my own treeview directive but i get this error:

TypeError: undefined is not a function

the codes is here.

and my directive codes is :

  app.directive('tree', [function () {
return {
    scope:{
        treeModel:'='
    },
    restrict: 'AE',
    template:'<ul><li ng-repeat="root in treeModel">{{root.name}}'+
    '<ul><li ng-repeat="h in root.hierarchies"><hierarchey hierarchey-     model="h"></hierarchey></li></ul>'
    +'</li><ul>'
};
 }]);
app.directive('hierarchey', [function () {
return {
    scope:{
        isExpand:false
    },
    controller:function($scope){
        $scope.hierarchyOp = function(){
            alert("IM CLIKED");
        }
    },
    restrict: 'AE',
    template:'<span ng-click="hierarchyOp()"><i ng-show="isExpand" class="fa fa-folder-open"></i><i ng-hide="isExpand" class="fa fa-folder-open"></i>{{h.name}}</span>'
};
}])

Sten Muchow · Accepted Answer · 2014-04-27 09:30:47Z

The first part of the problem is the fact that both directives have isolate scope.

So in order for the hierarchey directive to have access to the h variable through the heirarcheyModel variable you need to pass the value to the directive.

scope:{
 hierarcheyModel: '=' //add this to pass the object to the scope
}

The second part is due to the fact that ng-repeat also creates it's own scope which as far as i can tell is not a child scope of the parent. So u need the isolate scope and must pass the variable into the directive in order to have access to it.

Tree:

app.directive('tree', [function () {
  return {
    scope:{
        treeModel:'='
    },
    restrict: 'AE',
    template:
   '<ul>'+ 
     '<li ng-repeat="root in treeModel">{{root.name}}'+
      '<ul>' +
         '<li ng-repeat="h in root.hierarchies">' +
            '<hierarchey hierarchey-model="h"></hierarchey>' + 
          '</li>' +
         '</ul>' +
      '</li>'+ 
    '</ul>' //Forgot to close the ul
 };
}]);

Hierarchey

app.directive('hierarchey', [function () {
return {
    scope:{
        hierarcheyModel: '=' //add this to pass the object to the scope
    },
    controller:function($scope){
        $scope.hierarchyOp = function(){
            alert("IM CLIKED");
        }
        $scope.isExpand = false; // This value should like in the controller not the isolate scope
    },
    restrict: 'AE',
    template:'<span ng-click="hierarchyOp()"><i ng-show="isExpand" class="fa fa-folder-open"></i><i ng-hide="isExpand" class="fa fa-folder-open"></i>{{hieracheyModel.name}}</span>'
 };
}])

yccteam · Accepted Answer · 2014-04-27 10:25:46Z

1

I didn't delve into the code, just tried to solve the main problem. The problem arises from the fact you did not declare the app itself.

Have a look here: http://jsbin.com/rituvogu/2/edit

I've declared the app, and the issue is resolved (about the rest of your code - this is a different matter :)).

answered Apr 27, 2014 at 10:25

yccteam

2,3114 gold badges29 silver badges51 bronze badges

Collectives™ on Stack Overflow

Creating Angular Directive say Undefined is not a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related