javascript - Initialize dynamicaly added Xeditable Field -

javascript - Initialize dynamicaly added Xeditable Field -

i trying add together dynmic editable field in dropzone.js thumnail part ? know xeditable fields added dynamicaly initialize . trying ion angular

fiddle: http://jsfiddle.net/nfpch/2008/

code:

$scope.addfield = function() { jquery('.dropzone').append('<a href="#" editable-text="user.name" onbeforesave"updateuser()">kkkkkkkkkk</a>'); };

after click on add together xeditable field , new field added not getting initialize.

you should not utilize jquery add together new xeditable elements. create utilize of angular's scope , digest mechanism. first need array model, should iterate on , dynamically add together new editable-text directive elements in dom, letting angular job , compile new added directives @ right time.

see below code snippets may give start:

js:

// holds collection model. $scope.items = []; // [...] var addnewitem = function() { $scope.items[$scope.items.length] = { name: 'name' + new date().gettime(), label: 'new label' }; } // [...] $scope.addfield = function() { //jquery('.dropzone').append('<a href="#" editable-text="user.name" onbeforesave"updateuser()">kkkkkkkkkk</a>'); => don't way! addnewitem(); };

html:

<div action="/file-upload" class="dropzone" id="my-awesome-dropzone"> <a class="spacer" href="#" ng-repeat="item in items" ng-bind="item.label + '-' + $index" editable-text="item.name" onbeforesave="updateuser()"></a> </div>

have @ working fiddle.

javascript angularjs x-editable