[英]How to detect input element change when set value in angularjs
在線代碼:
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-model或范圍對象)可以得到它。
但是, 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>
更新了小提琴 。
除非你有充分的理由,否則你不應該使用querySelector
(就像你不應該使用jQuery)和Angular一樣。
您只需修改$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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.