AngularJS 文本框值未定义

Question

我创建了一个指令，它将 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 的值总是未定义，直到我手动输入一个值。

Answer 1

这是设计使然。 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>

AngularJS 文本框值未定义

AngularJS textbox value undefined

javascript

angularjs

angularjs-directive

angularjs-scope