How to detect input element change when set value in angularjs

Question

online code:

HTML

<div ng-app="myDirective" ng-controller="x">
    <input id="angular" type="text" ng-model="data.test" my-directive>
</div>
    <button onclick="document.querySelector('#angular').value = 'testg';">click</button>

JS

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);
                alert('value change: ' + scope.data.test);
            });
        }
    };
});

function x($scope) {
    //$scope.test = 'value here';
    $scope.data = {
        test: 'value here'
    }
}

http://jsfiddle.net/mb98y/310/

HTML

<div ng-app="myDirective" ng-controller="x">
<input id="angular" type="text" my-directive="test">{{test}}</div>
<button onclick="document.querySelector('#angular').value =  'testg';">click</button>

JS

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

I wanna click button to set input element value and angularjs(ng-model or scope object) can get it.

But, document.querySelector('#angular').value = 'testg';

change element value in this way, Neither angularjs $watch nor bind function can get value change event. If you input some words in input element by keyboard, they both works.

How can I detect input element value change when set value in this way in angularjs?

vittore · Accepted Answer · 2017-03-23 18:08:30Z

14

First of all, two-way data binding is here in order to avoid such scenarios.

 <input ng-model='ctrl.field' />

 <button ng-click='ctrl.field = "new value"'>change</button>

Second, there is ng-change directive that works together with ng-model, which can be used to do something when value in the model changed.

 <input ng-model='ctrl.field' ng-change='alert("changed!")' />

If you still want to change value outside of angular directly with DOM, just fire event that angular listen to - blur or keypressed

 <button ng-click='$("#id").val(a); $("#id").trigger("blur")'>change</button>

or

 <button ng-click='angular.element("#id").val(a); angular.element("#id").trigger("blur")'>change</button>

edited Mar 23, 2017 at 18:08

answered May 22, 2014 at 16:01

vittore

17.6k6 gold badges46 silver badges84 bronze badges

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

2 Comments

Gino Over a year ago

Good idea for me, the second method fire event works. I followed your suggestion without jquery. Thank you!

vittore Over a year ago

@Gino Angular expose jQuery-lite anyway, so you totally can do it with jquery.

Domi · Accepted Answer · 2014-05-22 16:02:03Z

2

Updated fiddle.

You are not supposed to use querySelector (just like you are not supposed to use jQuery) with Angular, unless you have a real good reason to.

You can just modify $scope.data.test, and your text box contents will be updated automatically. In order for this to work, you also need the button to have the same controller (so they share scope), and use ng-click instead of onclick, like so:

<div ng-app="myDirective" ng-controller="x">
    <input id="angular" type="text" ng-model="data.test" my-directive=""></input>
    <button ng-click="data.test = 'testg';">click</button>
</div>

edited May 22, 2014 at 16:02

answered May 22, 2014 at 15:37

Domi

24.9k19 gold badges104 silver badges133 bronze badges

Collectives™ on Stack Overflow

How to detect input element change when set value in angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related