Heim > Web-Frontend > js-Tutorial > Datenbindung für AngularJS

Datenbindung für AngularJS

不言
Freigeben: 2018-07-09 15:52:30
Original
1648 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Datenbindung von AngularJS vor, die einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf verweisen.

Datenbindung von AngularJS

Dort sind drei Datenbindungsmethoden in anglejs1.X für die Datensynchronisierung und -anzeige. Vor angularjs 1.3 gab es nur zwei Arten von angularjs: two-way-binding und one-way-bindng, und dann wurde ein Bindungsmechanismus namens one-time-binding eingeführt.

Derzeit gibt es in angularjs die folgenden drei Datenbindungsmethoden:

  • Zwei-Wege-Bindung

  • eine -Wege-Bindung

  • Einmal-Bindung

Zwei-Wege-Bindung

angularjs in besteht darin, Two-way-binding und Model zuzuordnen. Datenänderungen auf einer Seite aktualisieren die Daten auf der anderen Seite. View

Ein häufiges Szenario ist der Eingabebereich auf der Seite. Durch die bidirektionale Bindung kann der Wert des Eingabesteuerelements problemlos dem

Datenmodell zugeordnet werden.

<input type="text" id="text"  ng-model="name"/>
Nach dem Login kopieren
Durch

können wir den Wert des Eingabefelds (ng-model) einfach mit view (name) verknüpfen. Unabhängig davon, ob wir den Wert des Eingabefelds ändern oder Model ändern, wird die andere Seite unter dem Einfluss des bidirektionalen Datenflusses rechtzeitig mit neuen Daten aktualisiert. name

ist eine in ng-model integrierte Anweisung zur Implementierung einer bidirektionalen Bindung. angularjsIn verschiedenen Lebenszyklen gibt es unterschiedliche logische Prozesse. ng-model

  1. Kompilierungsphase:

    1. -Befehl und ng-model-Befehl werden zusammengeführt und in der input-Tag-Registrierung verarbeitet input-Ereignis (DOM-Ereignis); keydown

    2. registriert ein interpolation, um das $watch-Ereignis (angularjs-Ereignis) zu abonnieren. change

  2. Laufzeitphase

    1. Benutzereingabe-Trigger

      keydown

    2. Die

      -Anweisung erfasst das input-Ereignis und ruft keydown auf, um die Aktualisierungsaktion anzufordern. $apply

    3. Wert aktualisieren auf angularjsModel

    4. Kontext

      eingeben $digest

    5. Der

      -Ausdruck erkennt, dass $watch auftritt, benachrichtigt Model und fordert eine Aktualisierung change an. interpolationDOM

    6. Ende des Hostings, Beenden des Hostings und Rückgabe der Kontrolle an den JavaScript-Ausführungskontext.

      angularjs

    7. Schließlich rendert der Browser den Text neu.
    Einbahnige Bindung

Anders als der bidirektionale Fluss von

ist der Datenfluss von

unidirektional. das heißt, es fließt nur von Two-way-binding nach one-way-binding, nicht jedoch von model nach view. Daher wird view zum Anzeigen von Daten und nicht zum Abrufen von Eingaben verwendet. modelone-way-bindingIn

hat

zwei Syntaxen: angularjs und one-way-binding. ng-bind

<span ng-bind="name"> </span>
<span>{{name}}</span>
Nach dem Login kopieren
{{expression}}Für ist der interne Mechanismus teilweise derselbe wie für

. one-way-bindingtwo-way-binding

    Kompilierungsphase:
    1. Registrieren Sie ein

      , um das interpolation-Event (AngularJS-Event) zu abonnieren. . $watchchange

    Laufzeitphase:
    1. Geben Sie

      ein. angularjs$digest

    2. s

      erkennt Datenänderungen, benachrichtigt expression und fordert Aktualisierung $watch an. interpolationDOM

    3. Ende des Hostings, Beenden des Hostings und Rückgabe der Kontrolle an den JavaScript-Ausführungskontext.

      angularjs

    4. Schließlich rendert der Browser den Text neu.
    einmalige Bindung

Danach implementiert

einen Mechanismus namens 1.3. Im Wesentlichen unterscheidet sich sein Mechanismus nicht wesentlich von den beiden anderen Methoden, verhält sich jedoch anders, wenn Daten aktualisiert werden. angularjsone-time-binding

registriert sich auch

, um auf Datenänderungen zu warten, bricht die Überwachung jedoch ab, wenn zum ersten Mal Daten one-time-bindingnicht-undefiniert$watch erkannt werden.

<span>{{::name}}</span>
Nach dem Login kopieren

对于上面的代码,假设 nameundefined -> angularjs -> angular ,最终渲染的结果是 angularjs ,而不是 angular 。 这就是 one-time-binding 的特殊之处,当 nameundefined 变化为 angularjs之后,被认定为 name 的状态已经是 stable ,因此将取消 $watch , 即不再监听数据变化。

那么,假设 name'' -> angularjs-> angular, 则渲染结果是 '' ,即空字符串(第一次的值)。因为 one-time-binding 在计算 stable 时候使用的 严格相等,即 newVal === undefined, 如果是,则继续保留 $watch 等待下一次的比较;否则,状态变更为 stable,取消 $watch, 数据转化为最终态。

结束

在我看来,angularjs  核心在于 angularjs context$digest

angularjs context 保证 angularjs 可以捕获到各种事件,用户输入、鼠标事件、键盘事件、甚至 $settimeout$http 等异步行为的状态流转。

$digest 则保证 angularjs 可以确认是否要更新数据。

文中难免存在一些错误,欢迎大家斧正。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

jQuery/Vue的鼠标移入移出效果

addEventListener中的EventListener的接口对象

Das obige ist der detaillierte Inhalt vonDatenbindung für AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage