Wednesday, 15 January 2014

angularjs - ngClick Not Nesting through Recursive Tree Correctly -



angularjs - ngClick Not Nesting through Recursive Tree Correctly -

i using single recursive directive create nested tree. far directive working i'd like, having problem getting ngclick cooperate directive. have function going used toggle accordion display in tree, ngclick deed on top level collection of tree, when clicking sec or 3rd level caret.

i followed conventions in stackoverflow click register (a previous problem had), jut can't register in proper way: ng-click doesn't work within template of directive

my directive,

module.directive("navigation", function (configurationservice, navigationservice, $compile) { homecoming { restrict: 'e', replace: true, scope: { menu: '=', selected: '=', //todo: update clicked node selected node in navcontroller nextdata: '=', //todo: phone call servers 1 time again next 2 levels onclick: '&' }, }, controller: function($scope) { $scope.toggleexpand = navigationservice.toggleexpand; }, templateurl: configurationservice.getconfiguration().baseurl + "/modules/navigation/templates/navigation.html", compile: function (telement, tattr) { var contents = telement.contents().remove(); var compiledcontents; homecoming function(scope, ielement, iattr) { if(!compiledcontents) { compiledcontents = $compile(contents); } compiledcontents(scope, function(clone, scope) { ielement.append(clone); }); }; }, } } ];

the html template,

<ul style="list-style: none"> <li ng-repeat="node in menu.folders"> <i class="fa" ng-click="onclick({folder: node})" ng-class="{'fa-caret-right': node.expanded != true, 'fa-caret-down': node.expanded == true}"></i> <i class="fa fa-folder"></i> {{node.mnemonictitle}} <navigation menu="node" on-click="toggleexpand(folder)"></navigation> </li> <li ng-repeat="node in menu.currentitems"> item: {{node.mnemonictitle}} </li>

the function,

toggleexpand = function (folder) { if (!objecttool.has(folder, "expanded")) { folder.expanded = false; } folder.expanded = !folder.expanded; };

and directive beingness called in index,

<navigation class="nav tree" menu="applications[currentapplication].menu" on-click="toggleexpand(folder)"></navigation>

any help? know scope issue , question has been asked lot here, can't seem find has created recursive tree 1 directive , don't know angular in depth plenty figure out way around on own.

solved

changes made html template,

<ul style="list-style: none"> <li ng-repeat="node in menu.folders"> <i class="fa" ng-click="toggleexpand(node)" ng-class="{'fa-caret-right': node.expanded != true, 'fa-caret-down': node.expanded == true}"></i> <i class="fa fa-folder"></i> {{node.mnemonictitle}} <navigation menu="node" on-click="toggleexpand(folder)"></navigation> </li> <li ng-repeat="node in menu.currentitems"> item: {{node.mnemonictitle}} </li>

angularjs angularjs-directive angularjs-ng-repeat

No comments:

Post a Comment