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

这是设计使然。当您通过 input/change 事件因此 val() 不会触发setViewValue，因此模型值不会被更新。

此指令会将模型/视图中的值复制到您在复制到属性中传递的名称：

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>