AngularJS 文本框值未定义
AngularJS textbox value undefined
我创建了一个指令,它将 textbox1 的值复制到 textbox2。
function myCopyText() {
return {
restrict: 'A',
link: function(scope, element, attr) {
$('#textbox2').val($('#textbox1').val())
}
}
}
然后在文本框字段上:
<input type="text" id="textbox1" ng-model="vm.textbox1" my-copy-text />
<input type="text" id="textbox2" ng-model="vm.textbox2" />
在我提交其中 vm.textbox2
始终未定义的表单之前,它工作正常。但是如果我在textbox2上手动输入一个值,vm.textbox2
能够显示该值。
我觉得很奇怪,当指令进行赋值时,vm.textbox2
的值总是未定义,直到我手动输入一个值。
这是设计使然。 angular 摘要在您通过更改值时启动
input/change
事件因此 val() 不会触发 setViewValue
,因此模型值不会更新。
此指令会将 model/view 中的值复制到您在 replicate-to 属性中传递的名称:
function replicateTo($parse) {
return {
scope: false,
require: 'ngModel',
restrict: 'A',
link: function(scope, element, attr, ngModelCtrl) {
var target = $parse(attr.replicateTo);
var angularRender = ngModelCtrl.$render;
ngModelCtrl.$render = function(){
angularRender();
target.assign(scope, ngModelCtrl.$viewValue);
};
ngModelCtrl.$viewChangeListeners.push(function(){
target.assign(scope, ngModelCtrl.$viewValue);
});
}
}
}
<input type='text' ng-model="vm.textbox1" data-replicate-to="vm.textbox2"/> <br>
我创建了一个指令,它将 textbox1 的值复制到 textbox2。
function myCopyText() {
return {
restrict: 'A',
link: function(scope, element, attr) {
$('#textbox2').val($('#textbox1').val())
}
}
}
然后在文本框字段上:
<input type="text" id="textbox1" ng-model="vm.textbox1" my-copy-text />
<input type="text" id="textbox2" ng-model="vm.textbox2" />
在我提交其中 vm.textbox2
始终未定义的表单之前,它工作正常。但是如果我在textbox2上手动输入一个值,vm.textbox2
能够显示该值。
我觉得很奇怪,当指令进行赋值时,vm.textbox2
的值总是未定义,直到我手动输入一个值。
这是设计使然。 angular 摘要在您通过更改值时启动
input/change
事件因此 val() 不会触发 setViewValue
,因此模型值不会更新。
此指令会将 model/view 中的值复制到您在 replicate-to 属性中传递的名称:
function replicateTo($parse) {
return {
scope: false,
require: 'ngModel',
restrict: 'A',
link: function(scope, element, attr, ngModelCtrl) {
var target = $parse(attr.replicateTo);
var angularRender = ngModelCtrl.$render;
ngModelCtrl.$render = function(){
angularRender();
target.assign(scope, ngModelCtrl.$viewValue);
};
ngModelCtrl.$viewChangeListeners.push(function(){
target.assign(scope, ngModelCtrl.$viewValue);
});
}
}
}
<input type='text' ng-model="vm.textbox1" data-replicate-to="vm.textbox2"/> <br>