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-23 12:49:04Z

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, 2013 at 12:49

answered Jan 23, 2013 at 11:24

SunnyShah

30.6k30 gold badges97 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Szymon Wygnański Over a year ago

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.

SunnyShah Over a year ago

It does get updated, Try it. That is how it is working with two text-box in demo.

Sukesh Chand Over a year ago

it it possible to use this directive inside an another directive??

dude Over a year ago

When using this on a input[type=file] I get this error message: Error: The operation is insecure.

reggoodwin · Accepted Answer · 2013-03-07 16:17:47Z

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 7, 2013 at 16:17

reggoodwin

1,54413 silver badges15 bronze badges

2 Comments

Josh Noe Over a year ago

OP: "I need it to update when onchange event occurs instead when onkeyup/onkeydown event."

Peter M. Elias Over a year ago

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.

Community · Accepted Answer · 2017-05-23 12:32:02Z

2

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

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Feb 24, 2014 at 20:33

wired_in

2,6133 gold badges28 silver badges32 bronze badges

Comments

Ayush · Accepted Answer · 2016-03-31 17:28:54Z

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.

Collectives™ on Stack Overflow

How to create on-change directive for AngularJS?

4 Answers 4

4 Comments

2 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

1 Comment

Linked

Related