如何在angularjs中设置值时检测输入元素的变化

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>

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>

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.

我想点击按钮设置输入元素值和angularjs（ng-model或范围对象）可以得到它。

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

但是，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.

以这种方式改变元素值，angularjs $ watch和bind函数都不能获得值改变事件。如果你通过键盘在输入元素中输入一些单词，它们都可以工作。

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

在angularjs中以这种方式设置值时，如何检测输入元素值的变化？

2 个解决方案

#1

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.

其次，有ng-change指令与ng-model一起使用，当模型中的值发生变化时，可以使用它来做某事。

 <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

如果您仍希望直接使用DOM更改角度之外的值，则只需触发角度侦听的事件 - 模糊或按键

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

要么

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

#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.

除非你有充分的理由，否则你不应该使用querySelector（就像你不应该使用jQuery一样）。

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:

您只需修改$ scope.data.test，您的文本框内容将自动更新。为了使其工作，您还需要按钮具有相同的控制器（因此它们共享范围），并使用ng-click而不是onclick，如下所示：

<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>

#1