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，因此模型值不会更新。

该指令将模型/视图中的值复制到您在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文本框值未定义

1 个答案: