CODEWITHSUNDEEP
javascriptangularjs
MBehtemam
MBehtemam

Reputation: 7919

Creating Angular Directive say Undefined is not a function

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

Upvotes: 0

Views: 2065

Answers (2)

yccteam
yccteam

Reputation: 2311

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 :)).

Upvotes: 1

Sten Muchow
Sten Muchow

Reputation: 6701

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

Upvotes: 1

Related Questions