angularjs - Adding ng-change to child elements from linking function of directive -
i created directive should add ng-change directive dynamically child input tags:
myapp.directive('autosave', function ($compile) { return { compile: function compile(telement, tattrs) { return function postlink(scope, ielement, iattrs) { var shouldrun = scope.$eval(iattrs.autosave); if (shouldrun) { ielement.find(':input[ng-model]').each(function () { $(this).attr("ng-change", iattrs.ngsubmit); }); $compile(ielement.contents())(scope); console.log("done"); } }; //end linking fn } }; });
the problem have ng-change directive isn't running. can see added dom element not executing when value changes.
the strange thing if try ng-click, work.
dont know if bug on ng-change or if did somehting wrong.
fiddle ng-click (click on input) http://jsfiddle.net/dimirc/fq52v/
fiddle ng-change (should fire on change) http://jsfiddle.net/dimirc/6e3sk/
btw, can make work if move compile function, need able evaluate attribute of directive , dont have access directive compile fn.
thanks
you make life harder is. do'nt need angular compile/eval/etc stuff - @ end angular javascript : see modified (and working) example here :
if (shouldrun) { ielement.find(':input[ng-model]').on( 'change', function () { this.form.submit(); }); console.log("done"); }
http://jsfiddle.net/lgersman/wuw8b/1/
a few notes approach :
ng-change maps directly javascript change event. submit handler never called if uses cut/copy/paste on input elements. better solution use "input" event (which catches modification cases).
native events change/input etc bubbled parent dom elements in browser. have same attach change listener form instead of each input.
if want autosave every edit have unbelievable mass of calls submit handler. better approach slow-down/throttle submit event delegation (see http://orangevolt.blogspot.de/2013/08/debounced-throttled-model-updates-for.html ).
if want autosave every edit skip change handler stuff , suimply watch scope changes (which happen during angular model updates caused edits) , fine :
scope.watch( function() { eelement[0].submit(); });
Comments
Post a Comment