AngularJS - Attribute directive input value change

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

<div ng-app="myDirective" ng-controller="x">    <input type="text" ng-model="test" my-directive></div>

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';}

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.      });  };};

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