Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create on-change directive for AngularJS?

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/

like image 214
Szymon Wygnański Avatar asked Jan 23 '13 10:01

Szymon Wygnański


People also ask

What is Ng change in AngularJS?

AngularJS ng-change Directive The ng-change event is triggered at every change in the value. It will not wait until all changes are made, or when the input field loses focus. The ng-change event is only triggered if there is a actual change in the input value, and not if the change was made from a JavaScript.

Can we create custom directive in AngularJS?

AngularJS allows you to create custom directives with which it becomes easier to encapsulate and simplify DOM manipulation in AngularJS. These directives extend the HTML functionality.

What is $Watch in AngularJS?

$watch() function is used to watch the changes of variables in $scope object. Generally the $watch() function will create internally in Angularjs to handle variable changes in application. Let us understand with the following example to understand how to implement $watch().

Which directive is used for form in AngularJS?

The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies an inherit control from the HTML form.


1 Answers

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;
                    });
                }
            });
        }
    };        
});
like image 165
SunnyShah Avatar answered Oct 18 '22 04:10

SunnyShah