Angularjs directive, call same directive from within itself -
i building generic angularjs directive support editing of json object. have json data , admin data have details original data. following code details using build generic directive. please refer plunker running code.
http://plnkr.co/edit/x2lqhjyq48gwxw7oyyeq?p=preview directive code: app.directive("objecteditor", [function () { return { restrict: "e", templateurl: "objecteditor.html", replace: true, scope: { object: '=', objectadmin: '=' }, link: function (scope, element, attrs) { //method initialize scope.init = function () { }; //call init() initialze loading. scope.init(); } }; }]); directive template:
<div> <h4 data-ng-bind-template="{{objectadmin.displayname}}"></h4> <div data-ng-repeat="column in objectadmin.objectdefinition"> <div data-ng-switch="column.type"> <div data-ng-switch-when="string"> <label class="label-plain" data-ng-bind-template="{{column.displayname}}"></label> <input type="text" data-ng-model="object[objectadmin.name][column.name]" placeholder="{{displayname}}" title="{{displayname}}" name="textbox{{name}}" required /> </div> <!--call same object child type object. how??? if call <object> directive here goes infinite cycle --> <div data-ng-switch-when="object"> </div> </div> </div> </div> controller code:
var app = angular.module("myapp", []); app.controller('applicationcontroller', ['$scope', function($scope) { //method initialize $scope.init = function() { //set json data strucutre editing $scope.objectadmin ={"name":"bankinfo","displayname":"bank info","type":"object","objectdefinition":[{"name":"name","displayname":"bank name","type":"string"},{"name":"mainphone","displayname":"main phone","type":"string"},{"name":"contact","displayname":"contact","type":"object","objectdefinition":[{"name":"name","displayname":"name","type":"string"},{"name":"title","displayname":"title","type":"string"}]}]}; $scope.object={"bankinfo":{"name":"chase bank - newburgh","mainphone":"1 (845) 333-3333","contact":{"name":"donna shuler","title":"commercial accounts mgr."}}}; }; //call init() initialze loading. $scope.init(); } ]); index.html
<!doctype html> <html ng-app='myapp'> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="script.js"></script> <script src="objecteditor.js"></script> </head> <body data-ng-controller="applicationcontroller"> <h2>how call same directive within itself?</h2> <!--use object editor directive edit object details --> <objecteditor data-object="object" data-object-admin="objectadmin"></objecteditor> </body> </html> i want make directive generic same type of object editing can supported single directive.
when tried call same directive within fall infinite loop (which expected).
how can achieve functionality in directive? please help.
i going through recursive directive , came across following post helpful implement requirement. https://www.packtpub.com/books/content/recursive-directives. following code implement this. object editor directive template:
<div> <objecttree data-object="object" data-object-admin="objectadmin" data-folder-guid="folderguid" data-hide-header="'true'"></objecttree> <script type="text/ng-template" id="objecttree"> <div class="clear-left"> <h4 data-ng-if="!hideheader" data-ng-bind-template="{{objectadmin.displayname}}"></h4> <div data-ng-repeat="column in objectadmin.objectdefinition"> <div data-ng-switch="column.type"> <imageeditor data-ng-switch-when="image" data-image="object[column.name]" data-folder-guid="folderguid" data-column="column"></imageeditor> <formcheckbox data-ng-switch-when="boolean" data-input-value="object[column.name]" data-editable="column.editable" data-name="column.name" data-display-name="column.displayname" data-formname="'resourceaddeditformname'"></formcheckbox> <addresseditor data-ng-switch-when="address" data-address="object[column.name]" data-column="column" data-collection-admin="objectadmin"></addresseditor> <formtextbox data-ng-switch-when="string" data-ng-if="!column.isdropdown" data-input-value="object[column.name]" data-editable="column.editable" data-name="column.name" data-display-name="column.displayname" data-formname="'resourceaddeditformname'"></formtextbox> <dropdownbox data-ng-switch-when="string" data-ng-if="column.isdropdown" class="admin-textbox" data-selected-id-list="object[column.name]" data-dropdown="column" data-multiple="column.dropdowntypemultiple"></dropdownbox> <div data-ng-switch-when="object"> <hr/> <objecttree data-object="object[column.name]" data-object-admin="column" data-folder-guid="folderguid" data-hide-header="'true'"></objecttree> </div> <div data-ng-switch-when="array"> <hr/> <arrayobjecttree data-objects="object[column.name]" data-objects-admin="column" data-folder-guid="folderguid" data-hide-header="'true'"></arrayobjecttree> </div> </div> </div> </div> </script> </div> object tree:
app.directive("objecttree", ['$compile', '$templatecache', function ($compile, $templatecache) { return { restrict: "e", scope: { object: '=', objectadmin: '=', folderguid: '=', hideheader: '=' }, link: function (scope, element, attrs) { element.replacewith( $compile( $templatecache.get('objecttree') )(scope) ); } }; }]);
Comments
Post a Comment