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

【问题标题】：How to detect input element change when set value in angularjs在angularjs中设置值时如何检测输入元素的变化
【发布时间】：2014-07-11 17:55:14
【问题描述】：

在线代码：

http://jsfiddle.net/mb98y/309/

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

我想点击按钮设置输入元素值，angularjs(ng-model or scope object)可以得到它。

但是，document.querySelector('#angular').value = 'testg';

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

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

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

首先，双向数据绑定是为了避免这种情况。

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

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

其次，有一个ng-change指令与ng-model一起工作，可以在模型中的值发生变化时做一些事情。

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

如果您仍想直接使用 DOM 在 Angular 之外更改值，只需触发 Angular 监听的事件 - blur 或 keypressed

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

【讨论】：

对我来说好主意，第二种方法触发事件有效。我在没有 jquery 的情况下遵循了您的建议。谢谢！
@Gino Angular 无论如何都暴露了 jQuery-lite，所以你完全可以用 jquery 来做。

【解决方案2】：

Updated fiddle.

你不应该在 Angular 中使用 querySelector（就像你不应该使用 jQuery），除非你有充分的理由这样做。

您只需修改$scope.data.test，您的文本框内容将自动更新。为了使其工作，您还需要 button 具有相同的控制器（因此它们共享范围），并使用 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>

【讨论】：