在线代码：
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>
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';
}
我想单击按钮来设置输入元素值，angularjs（ng模型或范围对象）可以获取它。
但， document.querySelector('#angular').value = 'testg';
以这种方式更改元素值，angularjs $ watch和bind函数都无法获取值更改事件。如果您通过键盘在输入元素中输入了一些单词，它们都会起作用。
在angularjs中以这种方式设置值时，如何检测输入元素值的变化？
首先，在这里双向数据绑定是为了避免这种情况。
<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更改角度之外的值，则只需触发角度监听的事件-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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句