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

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -