AngularJS Textboxwert undefined

Question

Ich habe eine Direktive erstellt, in der der Wert von textbox1 in textbox2 kopiert wird.

function myCopyText() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attr) { 
      $('#textbox2').val($('#textbox1').val()) 
     } 
    } 
} 

Dann auf dem Textfeld:

<input type="text" id="textbox1" ng-model="vm.textbox1" my-copy-text /> 
<input type="text" id="textbox2" ng-model="vm.textbox2" /> 

Es funktioniert gut, bis ich das Formular abgeschickt, wobei vm.textbox2 immer nicht definiert ist. Aber wenn ich einen Wert manuell in textbox2 eingegeben habe, kann vm.textbox2 den Wert anzeigen.

Ich finde es seltsam, dass, wenn die Richtlinie die Wertzuweisung tun, vm.textbox2 ‚s-Wert nicht immer undefiniert, bis ich manuell einen Wert, indem Sie es in gesetzt.

Answer 1

, die durch Design ist. Der eckige Digest tritt ein, wenn Sie den Wert über das input/change Ereignis ändern, daher löst val() keinen setViewValue aus, daher wird der Modellwert nicht aktualisiert.

wird diese Richtlinie den Wert aus dem Modell/Ansicht replizieren Sie in der auf den Namen übergeben Replikat-to-Attribut:

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>