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>