Angular1-Studiennotizen, die den Synchronisierungsprozess des Ansichtsmodells in AngularJS enthalten

Dies ist eine persönliche Verständnisnotiz von angularjs Hier ist der Synchronisierungsprozess des Ansichtsmodells. Lassen Sie uns diesen Artikel nun gemeinsam lesen Die Angelegenheit entstand aus einem kleinen Problem, das im Projekt aufgetreten ist: Das Projekt erfordert ein Eingabefeld zur Eingabe der Menge der verkauften Produkte, und die Bearbeitungsgebühr wird basierend auf den Eingabedaten nach Benutzereingaben berechnet. Natürlich habe ich ng-model und ng-change verwendet, und im Allgemeinen gibt es kein Problem. Das Problem ist: Unter dem Eingabefeld befindet sich eine Schaltfläche zum Verkaufen aller Artikel. Durch Klicken auf diese Schaltfläche wird der Verkaufsbetrag automatisch festgelegt. Tatsächlich berechnet das Programm die Bearbeitungsgebühr zu diesem Zeitpunkt jedoch nicht.

Nach der Fehlerbehebung und der Durchsicht der Dokumentation stellte ich fest, dass es sich um ein Problem mit ng-change handelte. Angulars offizielles Dokument zu ng-change-Eingabeaufforderungen:

Der Ausdruck wird nicht ausgewertet, wenn die Wertänderung vom Modell kommt.
Der Quellcode von ng-change ist ebenfalls sehr einfach:

  var ngChangeDirective = valueFn({
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attr, ctrl) {
        ctrl.$viewChangeListeners.push(function() {
          scope.$eval(attr.ngChange);
        });
      }
    });

From Wir können auch sehen, dass ng-change nur die Ansicht des Modells überwacht. Wenn wir also die Variablen von ng-model direkt in js ändern, wird ng-change nicht ausgelöst. Das Problem ist gefunden und die Lösung ist nicht schwierig. Geben Sie einfach ng-change auf und verwenden Sie stattdessen

$watch
. Aber ist es vorbei? Was genau durchläuft eine Variable vom Zeitpunkt der Ansichtsänderung bis zur synchronen Aktualisierung mit dem Modell? Ist es umgekehrt dasselbe? Also habe ich mir den Quellcode von ng-model noch einmal angesehen und nichts gefunden, aber ich habe unerwartet Folgendes erfahren:
ng-change wird ausgeführt, bevor sich der Modellwert ändert. Im ng-model-Quellcode gibt es eine solche Funktion:

function setupModelWatcher(ctrl) {
  // model -> value
  // !!!Note: we cannot use a normal scope.$watch as we want to detect the following:
  // !!!1. scope value is 'a'
  // !!! 2. user enters 'b'
  // !!!3. ng-change kicks in and reverts scope value to 'a'
  //    -> scope value did not change since the last digest as
  //       ng-change executes in apply phase
  // !!!4. view should be changed back to 'a'
  ctrl.$$scope.$watch(function ngModelWatch(scope) {
    var modelValue = ctrl.$$ngModelGet(scope);

    // if scope model value and ngModel value are out of sync
    // This cannot be moved to the action function, because it would not catch the
    // case where the model is changed in the ngChange function or the model setter
    if (modelValue !== ctrl.$modelValue &&
      // checks for NaN is needed to allow setting the model to NaN when there's an asyncValidator
      // eslint-disable-next-line no-self-compare
      (ctrl.$modelValue === ctrl.$modelValue || modelValue === modelValue)
    ) {
      ctrl.$$setModelValue(modelValue);
    }

    return modelValue;
  });
}

Die darin enthaltenen Kommentare erklären, warum der variable Modellwert nach ng-change geändert werden muss, da der Variablenwert wahrscheinlich wieder in ng- geändert wird. ändern, damit sich der Variablenwert nicht tatsächlich ändert (man muss wirklich alle Situationen berücksichtigen, wenn man eine API schreibt!!). Zu dieser und der vorherigen Frage finden Sie hier einen Democode: http://php.cn/course/47.html

Da es nichts bringt, sich den Quellcode anzusehen, suchen Sie nach Artikeln online. Während dieses Prozesses habe ich einen guten Artikel gefunden, der

,

, $formatters und $parsers vorstellte. Ich werde es hier nicht mehr vorstellen, der Originaltext ist hier: http://php.cn/course/47.html$render$setViewValueWährend des Studiums

habe ich auch einen gefunden Punkt, der sich leicht täuschen lässt: Wenn beim Aufruf von

der Parameter eine Referenzvariable ist und sich die Referenzvariablenadresse nicht geändert hat, wird die Variable als unverändert betrachtet, z. B. var map = ['er', 'tr ']; then map.pop(); Danach geht $setViewValue nicht davon aus, dass sich der Kartenwert geändert hat. Einzelheiten dazu finden Sie in meiner Antwort auf diese Frage. (Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website $setViewValueAngularJS Development Manual $setViewValue, um mehr zu erfahren.) ng-model hat auch dieses Problem, das in der ng-model-Quelle zu sehen ist Codekommentare:

Benutzerdefinierte Steuerelemente können jedoch auch Objekte an diese Methode übergeben.

In diesem Fall sollten wir eine Kopie des Objekts erstellen, bevor wir es an

übergeben. Dies liegt daran, dass
keine gründliche$setViewValueÜberwachung von Objekten durchführt, sondern nur nach einer Änderung der Identität sucht.ngModelWenn Sie nur die Eigenschaft des Objekts ändern, wird ngModel nicht
erkennen, dass das Objekt hat sich geändert und ruft die Pipelines

und $parsers nicht auf.
$validators

Sie können oben auch sehen, dass die Aktualisierung einer Variablen von Ansicht zu Modell und von Modell zu Ansicht erfolgt mehr als nur die Pipelines

und

. Was gibt es sonst noch? $formatters$parsersNachdem ich viele Informationen überprüft habe, habe ich eine sehr klare Erklärung gefunden: https://stackoverflow.com/que... Tatsächlich müssen Sie nur die Antwort auf die Frage lesen lang. . .

In dieser Antwort gibt es einen Demo-Link, den ich kopiert und unter dieser Adresse abgelegt habe: http://php.cn/course/47.html. Diese Demo zeigt den Prozess deutlich Hier werden die Ergebnisse nur wie folgt zusammengefasst:

Vom Modell zur Ansicht:
Modellwertänderung----> ---->
---->
Funktion$formatters$renderVon Ansicht zu Modell: $validatorsWertänderung anzeigen-- $watchFunktion-- -- >

Pipeline---->

Funktion----> der Wert von
und der Vorgang ist derselbe wie oben. $setViewValueBeachten Sie, dass Sie bei der Verwendung von $parsers auf Parameter achten müssen, die sich auf Variablen beziehen. Diese Gefahr wurde ebenfalls oben erwähnt. $validators$viewChangeListenerIn diesem Artikel werden die Pipelines $watch und
nicht speziell vorgestellt. Für diesen Teil können Sie auf den im Artikel angegebenen Link $setViewValue verweisen.

Okay, dieser Artikel endet hier (wenn Sie mehr lesen möchten, besuchen Sie die chinesische PHP-Website AngularJS-Benutzerhandbuch , um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen).

Das obige ist der detaillierte Inhalt vonAngular1-Studiennotizen, die den Synchronisierungsprozess des Ansichtsmodells in AngularJS enthalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!