javascript - AngularJS ng-template inside ng-template for tree structure -
i face logical problem code: use modalbox (bootstrapui) ngtemplate in angularjs app. inside ngtemplate, need display nested tree hierarchy (which means i'll have use ngtemplate inside ngtemplate.
here json structure of tree's data:
{ "dropbox": { "/": { "name": "/", "source": "dropbox", "identifier": "none", "children": { "9 th grade class": { "name": "9 th grade class", "source": "dropbox", "identifier": "046ec8907f797029735b293f2fed8df5", "children": {} }, "documents": { "name": "documents", "source": "dropbox", "identifier": "none", "children": { "test": { "name": "test", "source": "dropbox", "identifier": "264854fc64d1e0d410e78e0488cab8b8", "children": {} } } }, "photos": { "name": "photos", "source": "dropbox", "identifier": "none", "children": { "sample album": { "name": "sample album", "source": "dropbox", "identifier": "6024199d9d312ba8347f515675321564", "children": {} } } }, "some folder very very very long name": { "name": "some folder very very very long name", "source": "dropbox", "identifier": "700e932df5e5a678220b5e82e85dc2b2", "children": {} }, "testhierarchy": { "name": "testhierarchy", "source": "dropbox", "identifier": "none", "children": { "child": { "name": "child", "source": "dropbox", "identifier": "748961a8a3502a48bd4082cd2c0339eb", "children": {} } } } } } } }
tl;dr json structured
data.dropbox - {name: 'example', children: [ {name: 'asd', ]}
some appreciated.
it below. html:
/* on normal html */ <tree></tree> /* in treedirective.html , bind inner scope. */ <tree></tree> the directive:
.directive("tree", function (recursionhelper) { return { restrict: "e", scope: { }, replace: true, templateurl: './partials/treedirective.html', compile: function(element) { return recursionhelper.compile(element, function(scope, ielement, iattrs, controller, transcludefn) { // define normal link function here. // alternative: instead of passing function, // can pass object // 'pre'- , 'post'-link function. }; } }; }) the recursion factory.
.factory('recursionhelper', [ '$compile', function($compile) { return { /** * manually compiles element, fixing recursion loop. * @param element * @param [link] post-link function, or object function(s) registered via pre , post properties. * @returns object containing linking functions. */ compile: function(element, link) { // normalize link parameter if (angular.isfunction(link)) { link = { post: link }; } // break recursion loop removing contents var contents = element.contents().remove(); var compiledcontents; return { pre: (link && link.pre) ? link.pre : null, /** * compiles , re-adds contents */ post: function(scope, element) { // compile contents if (!compiledcontents) { compiledcontents = $compile(contents); } // re-add compiled contents element compiledcontents(scope, function(clone) { element.append(clone); }); // call post-linking function, if if (link && link.post) { link.post.apply(null, arguments); } } }; } }; }]); see how on witht that. on directive can put onto scope, have write code sub child , set scope.
Comments
Post a Comment