AngularJS textbox value undefined

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>