AngularJS - Attribute directive input value change

Question

I ve got an AngularJS attribute directive  and I would like to take an action any time its parent input s value changes  Right now I m doing it with jQuery   angular module  myDirective        directive  myDirective   function         return           restrict   A           scope                        myDirective    myDirective                     link  function scope  element  attrs                        element keypress function                                    do stuff                                        Is there a way to do this without jQuery  I m finding the keyPress event isn t doing exactly what I want it to  and while I m sure I ll come up with a solution  I get a little nervous when I resort to using jQuery in an Angular project   So what s the Angular way to do this

User · Answer

Since this must have an input element as a parent, you could just use

<input type="text" ng-model="foo" ng-change="myOnChangeFunction()">

Alternatively, you could use the ngModelController and add a function to $formatters, which executes functions on input change. See http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

.directive("myDirective", function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      ngModel.$formatters.push(function(value) {
        // Do stuff here, and return the formatted value.
      });
  };
};

User · Answer

There s a great example in the AngularJS docs   It s very well commented and should get you pointed in the right direction   A simple example  maybe more so what you re looking for is below   jsfiddle    HTML   lt div ng-app  myDirective  ng-controller  x  gt       lt input type  text  ng-model  test  my-directive gt   lt  div gt      JavaScript  angular module  myDirective            directive  myDirective   function          return           restrict   A           link  function  scope  element  attrs                scope  watch attrs ngModel  function  v                    console log  value changed  new value is      v                                         function x  scope         scope test    value here           Edit  Same thing  doesn t require ngModel jsfiddle   JavaScript  angular module  myDirective            directive  myDirective   function          return           restrict   A           scope                myDirective                         link  function  scope  element  attrs                   set the initial value of the textbox             element val scope myDirective               element data  old-value   scope myDirective                   detect outside changes and update our input             scope  watch  myDirective   function  val                    element val scope myDirective                                   on blur  update the value in scope             element bind  propertychange keyup paste   function  blurEvent                    if  element data  old-value      element val                          console log  value changed  new value is      element val                         scope  apply function                              scope myDirective   element val                            element data  old-value   element val                                                                                     function x  scope         scope test    value here

User · Answer

To watch out the runtime changes in value of a custom directive  use  observe method of attrs object  instead of putting  watch inside a custom directive  Here is the documentation for the same      observe docs

[jquery] AngularJS - Attribute directive input value change

Examples related to jquery

Examples related to angularjs

Examples related to attributes

Examples related to directive