javascript - Unable to replace an element within an ng-template -
i trying create directive can have recursive tree structure using angularjs each node can have own template in transclude section.
here js:
var app = angular.module('plunker', []); app.controller('mainctrl', function($scope) { $scope.input = [{ name: 'blueberry cheesecake', color: 'blue', children: [{ name: 'blueberry cheesecake', color: 'blue' }, { name: 'rocky road', color: 'mostly brown' }] }, { name: 'rocky road', color: 'mostly brown' }]; }); app.directive("auratree", function() { return { scope: { input: "=" }, template: function(element) { element.data("customlisttemplate", element.find("item-template")); var c = '<script type="text/ng-template" id="auratree2">' + '<item-placeholder></item-placeholder>' + ' <div ng-if="item.children">' + ' <div ng-repeat="item in item.children" ng-include="' + "'" + 'auratree2' + "'" + '">' + ' <item-placeholder></item-placeholder></div>' + ' </div>' + '</script>' + '<div ng-repeat="item in input" ng-include = "' + "'" + 'auratree2' + "'" + '">' + '</div>'; console.log(c); return c; }, compile: function(telement, tattrs) { var template = telement.data("customlisttemplate"); telement.find("script").html(telement.find("script").html().replace("<item- placeholder></item-placeholder>", template.html())); } }; function link(scope, element, attrs) {} }); here html
<!doctype html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>aura tree</title> <script>document.write('<base href="' + document.location + '" />');</script> <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script> <script src="auratree.js"></script> </head> <body ng-controller="mainctrl"> <pre>template 1:</pre> <auratree input="input"> <item-template> {{$index}} | {{item.name}} <hr> </item-template> </auratree> </body> </html> this code
telement.find("script") .html(telement.find("script").html() .replace("<item-placeholder></item-placeholder>",template.html())); is working in chrome, not working in ie11.
the usual element.replacewith not working, tried change html... unsuccessful.
please tell me solution overcome problem.
here plunker:
i don't think approach ng-template works expect it. if manage replace placeholder in ng-template, if had multiple <auratree> elements in app, each different item template, have same (last compiled) template.
using ng-include clever trick, problem more complicated. instead of relying on ng-included template, include same directive @ each level @ link-time (which ng-include anyway), , make use of transclude item-template.
because of asymmetry between root element (which has array of items), , each sub-tree (which has values , children) added directive represent each tree item:
the root directive repeats each item , transcludes item-template:
app.directive("tree", function(){ return { restrict: "e", scope: { items: "=" }, transclude: true, template: '<div ng-repeat="item in items">\ <tree-item item="item"></tree-item>\ </div>', link: function(scope){ scope.$level = -1; } }; }); the treeitem directive transcludes item-template parent, , repeats child items, if any:
app.directive("treeitem", function($compile){ return { scope: { item: "=" }, link: function(scope, element, attrs, ctrls, transclude){ scope.$index = scope.$parent.$index; scope.$level = scope.$parent.$level + 1; transclude(scope, function(clone){ element.append(clone.contents()); var repeater = angular.element('<div ng-repeat="child in item.children">'); var subtree = angular.element('<tree-item item="child">'); element.append(repeater.append(subtree)); $compile(repeater)(scope, null, { parentboundtranscludefn: transclude }); }); } }; }); the usage is:
<tree items="items"> <item-template> {{$level}}.{{$index}} | {{item.v}} </item-template> </tree>
Comments
Post a Comment