How to create on-change directive for AngularJS?

Question

Normally ng-model updates bound model each time user pushes the key:

<input type="text" ng-model="entity.value" />

This works great in almost every case.

But I need it to update when onchange event occurs instead when onkeyup/onkeydown event.

In older versions of angular there was a ng-model-instant directive which worked same as ng-model works now (at least for the user - i don't know anything about their implementations). So in older version if I just gave ng-model it was updating the model onchange and when I specified ng-model-instant it was updating the model onkeypup.

Now I need ng-model to use on "change" event of the element. I don't want it to be instant. What's the simplest way of doing this?

EDIT

The input still has to reflect any other changes to the model - if the model will be updated in other place, value of the input should reflect this change.

What I need is to have ng-model directive to work just like it worked in the older versions of angularjs.

Here is an explanation of what I'm trying to do: http://jsfiddle.net/selbh/EPNRd/

SunnyShah · Accepted Answer · 2013-01-23T12:49:04.700

20

Here I created onChange directive for you. Demo: http://jsfiddle.net/sunnycpp/TZnj2/52/

app.directive('onChange', function() {    
    return {
        restrict: 'A',
        scope:{'onChange':'=' },
        link: function(scope, elm, attrs) {
            scope.$watch('onChange', function(nVal) { elm.val(nVal); });            
            elm.bind('blur', function() {
                var currentValue = elm.val();
                if( scope.onChange !== currentValue ) {
                    scope.$apply(function() {
                        scope.onChange = currentValue;
                    });
                }
            });
        }
    };        
});

edited Jan 23 '13 at 12:49

answered Jan 23 '13 at 11:24

SunnyShah

28,934
30
90
137

1

But I still want it to be updated when the model will be changed somewhere else. onchange directive can be found in angularui (ui-event="{ change : 'changeCallback()' }), I'm aware of that. – Szymon Wygnański Jan 23 '13 at 11:31
1

It does get updated, Try it. That is how it is working with two text-box in demo. – SunnyShah Jan 23 '13 at 11:32
it it possible to use this directive inside an another directive?? – Sukesh Chand Jan 16 '15 at 04:53
When using this on a input[type=file] I get this error message: Error: The operation is insecure. – dude Jul 20 '15 at 09:43

score 4 · Answer 2 · answered Mar 07 '13 at 16:17

4

See also: the AngularJS ngChange directive.

When applied to an <input> the changes occurs after each key press not on the blur event.

http://docs.angularjs.org/api/ng.directive:ngChange

answered Mar 07 '13 at 16:17

reggoodwin

1,514
13
14

OP: "I need it to update when onchange event occurs instead when onkeyup/onkeydown event." – Josh Noe Sep 17 '14 at 05:27
1

It's also worth noting that `ng-change` does not in fact bind to the `change` event in JavaScript. It actually sets a `$viewValue` change listener within the `ng-model` system. Not the same thing. – Peter M. Elias May 15 '15 at 18:38

score 2 · Answer 3 · edited May 23 '17 at 12:32

Angularjs: input[text] ngChange fires while the value is changing : This answer provides a much better solution that allows the custom directive to work with ngModel so you can still use all of the other directives that go along with ngModel.

Also, an even more flexible solution that allows for specifying the event to use (not just blur) and other properties should be built in to angular very soon: https://github.com/angular/angular.js/pull/2129

Ayush · Answer 4 · 2016-03-31T17:28:54.230

I'm not sure if there is a better way to do this, but you can achieve this using a custom directive (on any jquery event you want)

<input type="text" ng-model="foo" custom-event="bar" />
<p> {{ bar }} </p>

// create the custom directive

app.directive('customEvent', function() {
    return function(scope, element, attrs) {
        var dest = attrs.customEvent;

        $(element[0]).on('any-jquery-event', function(e) {
            e.preventDefault();

            // on the event, copy the contents of model
            // to the destination variable
            scope[dest] = scope.foo;

            if (!scope.$$phase)
                scope.$apply();
        });
    }
});

i dont think this works with recent angularjs. I get an error scope.apply() function doesnt exist. — gerl, May 23 '14 at 19:00

How to create on-change directive for AngularJS?

4 Answers4

Linked