How to create on-change directive for AngularJS when change a property of a model?

Question

I was trying to find a solution to the following problem:

How to create on-change directive for AngularJS?

And i've founded, the jsFiddle in the answer it works...but only if the property is attached directly to the $scope. In fact if i

1) change $scope.strText to $scope.model.strText 2) and change the attribute values from strText to model.strText

does not work anymore.

here there is the HTML code:

<div ng-controller="MyCtrl">
    <input on-change="model.strText"/>
    <input on-change="model.strText"/>
    <p>{{model.strText}}</p>
</div>

and here there is the JS code:

var app=angular.module('myApp', []);

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

app.controller('MyCtrl', function($scope) { 
    $scope.model.strText = "Hello";
});

Here there is the jsFiddle

http://jsfiddle.net/pmcalabrese/XbJVb/

Thank you in advance.

zs2020 · Accepted Answer · 2013-08-29 19:24:50Z

2

Your data source has some flaw since $scope.model is undefined. Change it to

app.controller('MyCtrl', function ($scope) {
    $scope.model = {};
    $scope.model.strText = "Hello";
});

answered Aug 29, 2013 at 19:24

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

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

Collectives™ on Stack Overflow

How to create on-change directive for AngularJS when change a property of a model?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related