Datenbindungsmechanismus in AngularJS
Mục lục
Datenbindungskonzept in angleJS
Datenbindung in angleJS bedeutet wörtlich Datenbindung zwischen der Ansicht und dem Controller, was bedeutet, dass wenn die Daten auf der Controller-Schicht geändert werden, auch die Daten der Ansichtsschicht sofort geändert werden. Wir verstehen dies als einen Begriff des Mechanismus.
Kehren Sie zum folgenden Beispiel zurück:
<!DOCTYPE html> <html lang="en" ng-app="exampleviewApp"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example View AngularJS</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-controller="mainController"> <h2>Hello {{name}}</h2> <input type="text" ng-model="name" /> </body> <script> var exampleviewApp = angular.module('exampleviewApp', []); exampleviewApp.controller('mainController', function($scope) { $scope.name = ''; }); </script> </html>Beim Aktualisieren der Daten in der Eingabe werden die Daten im h2-Tag, der Inhalt neben dem Wort hallo, entsprechend geändert.
Quellcodeanalyse:
- Definieren Sie in der Javascript-Schicht eine neue Eigenschaft namens name für die $scope-Variable (diese Variable ist die Kommunikationsvariable zwischen der Controller-Schicht und den Ansichten, die in einem späteren Beitrag besprochen wird) und weisen Sie dem Wert einen leeren String zu.
- Der Text im h2-Tag kombiniert hallo und den eckigen JS-Ausdruck {{name}} , hier versteht eckiger JS diesen Ausdruck und übernimmt ihn, um das Namensattribut in der $scope-Variablen auf der Controller-Ebene abzurufen und dem Benutzer anzuzeigen.
- Eingabe innerhalb der HTML-Struktur über das ng-model-Attribut (AngularJS-Direktiven), das auch das name-Attribut der $scope-Variable darstellt
- Beim Aktualisieren von Daten in der Eingabe werden auch die Daten auf dem h1-Tag automatisch aktualisiert, dieser Mechanismus wird als Datenbindung von angleJS bezeichnet.
Für den Fall des Ausdrucks {{name}} in der obigen Situation, wenn die Daten aktualisiert werden, wird der HTML-Code auch in Echtzeit erkannt und aktualisiert, was als unidirektionale Datenbindung bezeichnet wird. (Es ist sehr praktisch beim Programmieren, wenn wir reines Javascript verwenden, müssen wir das Onkeyup-Ereignis des Benutzers abfangen, den Selektor auf das h1-Tag abfragen, den inneren Text ändern => angleJS hilft, sich im Vergleich zur Zeitcodierungszeit weiter zu verbessern, wodurch viele Details reduziert werden beim Programmieren, dass reines Javascript oder jquery nicht tun können).
Zwei-Wege-Datenbindung (Zwei-Wege-Bindung)
Zurück zum ersten Beispiel: Wenn wir die Eingabe eingeben, werden die Daten im h1-Tag entsprechend aktualisiert. Das heißt, wenn wir den Inhalt in der Eingabe aktualisieren, wird der Wert des name-Attributs in der $scope-Variable ebenfalls in Echtzeit geändert, dies ist der bidirektionale Datenbindungsmechanismus von angleJS. Dieser Mechanismus existiert in den meisten grundlegenden HTML-Eingabe-Tags, wie z. B. text input, textarea , select, …. über die Direktiven ng-model
Der bidirektionale Datenbindungsmechanismus hilft, die Daten innerhalb des Modells in Echtzeit zu aktualisieren, wenn es eine Änderung in der Logikschicht (Javascript) oder der HTML-Schicht gibt, wenn der Benutzer den Inhalt in der Eingabe aktualisiert.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
