$ modelValue ist undefined beim Versuch, darauf in einer Direktive zuzugreifen

Question

Ich versuche, einen Zoll zu mm Konverter zu implementieren ... Alles was ich will ist, wenn Benutzer einen Wert in Zoll im Textfeld eingibt, das Textfeld (anzeigen) sollte den Wert in Zoll anzeigen. Wo sollte das Modell den Wert in mm halten. Dafür habe ich eine Direktive wie unten beschrieben geschrieben.

Das Modell wird in mm aktualisiert, wie ich es durch Debugging überprüft habe. Wenn ich jedoch außerhalb des Textfelds klicke (Blur-Ereignis), wechsle die Ansicht auf eine andere Registerkarte in meiner Web-App und kehre zurück, der Modellwert wird wieder in das Textfeld eingetragen. Also dachte ich, dass ich beim Fokusereignis $ modelValue/25 (mm to inch conversion) als Parameter an die Funktion $ setViewValue() übergeben kann. Aber ich bekomme $ ModelValue Attribut als undefiniert.

.directive('metricImperialInput', function($timeout){ 
       return{ 
        require: 'ngModel', 
        link: function(scope, element, attrs, modelCtrl){ 
         element.bind("focus", function(e) { 
         $timeout(function() { 
          modelCtrl.$setViewValue(modelCtrl.$modelValue/25); 
          modelCtrl.$render(); 
        }, 0); 
        }); 
         modelCtrl.$parsers.push(function(inputValue){ 
          var changedOutput = parseInt(inputValue) * 25; 
          modelCtrl.$setViewValue(parseInt(inputValue)); 
          modelCtrl.$render(); 
          return parseInt(changedOutput); 
         }); 
        } 
       }; 
      }); 

Answer 1

Sie richtig ngModelController.$parsers verwenden, aber innerhalb des Parsers Sie auch $setViewValue() verwenden, die völlig unnötigen, weil die Inputvalue, dass die Parser-Funktion recieves ist bereits die $viewValue! So kann das zusammen mit der $render() entfernt werden. Das Fokus-Ereignis ist auch nicht notwendig, weil es nichts nützliches tut, wenn Sie die $ -Parser richtig benutzen.

So, jetzt haben Sie gerade diesen Rest:

.directive('metricImperialInput', function($timeout){ 
      return{ 
       require: 'ngModel', 
       link: function(scope, element, attrs, modelCtrl){ 
       modelCtrl.$parsers.push(function(inputValue){ 
        var changedOutput = parseInt(inputValue) * 25; 
        return parseInt(changedOutput) || 0; 
       }); 
       } 
      }; 
     }); 

Aber es gibt Problem dabei, die ersten $ modelValue wird nicht konvertiert, bis Sie mit der Eingabe beginnen. Dazu habe ich die folgenden Zeilen hinzugefügt, um sicherzustellen, dass beim Laden der Direktive die Anfangswerte korrekt gesetzt werden und danach die Parser alles handhaben.

var initVal = $parse(attrs.ngModel)(scope); 
modelCtrl.$viewValue = initVal/25; 
modelCtrl.$modelValue = initVal; 
modelCtrl.$render(); 

Sie können die gesamte Lösung in diesem JSFiddle finden.

Answer 2

Sie versuchen, auf den Modellwert im Eingabefokus zuzugreifen. Versuchen Sie stattdessen, auf den Modellwert auf keyup zuzugreifen. Verwenden Sie auch modelCtrl. $ ViewValue anstelle von modelCtrl. $ ModelValue. Das Ausführungsbeispiel ist unten:

`element.bind("keyup", function(e) { 
      $timeout(function() { 
        modelCtrl.$setViewValue(modelCtrl.$viewValue/25); 
        modelCtrl.$render(); 
      }, 0); 
    });`