Liaison de données pour AngularJS

Cet article présente principalement la liaison de données d'angularjs, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Liaison de données d'angularjs

Là. Il existe trois méthodes de liaison de données dans Angularjs1.X pour la synchronisation et l'affichage des données. Avant angularjs 1.3, il n'y avait que deux manières de angularjs : two-way-binding et one-way-bindng, puis un mécanisme de liaison appelé one-time-binding a été introduit.

Actuellement, il existe les trois méthodes de liaison de données suivantes dans angularjs :

• liaison bidirectionnelle

• une -direction-reliure

• reliure unique

reliure bidirectionnelle

angularjs dans est d'associer Two-way-binding et Model. Les modifications de données de chaque côté mettront à jour les données de l'autre côté. View

Un scénario courant est la zone de saisie sur la page. La liaison bidirectionnelle peut facilement associer la valeur du contrôle d'entrée au

modèle de données.

<input type="text" id="text"  ng-model="name"/>

Grâce à

, nous pouvons facilement associer la valeur de la zone de saisie (ng-model) à view (name). Sous l'influence du flux de données bidirectionnel, que nous modifions la valeur de la zone de saisie ou que nous modifiions Model, l'autre côté sera mis à jour avec de nouvelles données à temps. name

est une directive intégrée de ng-model pour implémenter une liaison bidirectionnelle. angularjs Dans différents cycles de vie, il existe différents processus logiques. ng-model

1. phase de compilation :

1. la commande et la commande ng-model seront fusionnées et traitées dans l'enregistrement de la balise input input événement (événement DOM) ; keydown

2. enregistre un interpolation pour s'abonner à l'événement $watch (événement angulaire js). change

2. Phase d'exécution

1. Déclencheur d'entrée utilisateur

   keydown

2. L'instruction

   capture l'événement input et appelle keydown pour demander l'action de mise à jour. $apply

3. Mettre à jour la valeur à angularjsModel

4. Entrer le contexte

   $digest

5. L'expression

   détecte que $watch se produit, informe Model et demande une mise à jour change. interpolationDOM

6. Fin de l'hébergement, quitter l'hébergement et rendre le contrôle au contexte d'exécution JavaScript.

   angularjs

Enfin, le navigateur restitue le texte.

Liaison unidirectionnelle

Différent du flux bidirectionnel de

, le flux de données de

est unidirectionnel, c'est-à-dire qu'il circulera uniquement des flux Two-way-binding vers one-way-binding, mais pas de model vers view. Par conséquent, view est utilisé pour afficher des données, pas pour obtenir des entrées. modelone-way-bindingDans

,

a deux syntaxes : angularjs et one-way-binding. ng-bind{{expression}}

Pour

<span ng-bind="name"> </span>
<span>{{name}}</span>

, le mécanisme interne est partiellement le même que pour

. one-way-bindingtwo-way-binding

phase de compilation :
1. Enregistrez un

   pour vous abonner à l'événement interpolation (angularjs Event) . $watchchange

phase d'exécution :
1. Entrez

   . Le angularjs de $digest

2. détecte les modifications de données, informe expression et demande une mise à jour $watch. interpolationDOM

3. Fin de l'hébergement, quitter l'hébergement et rendre le contrôle au contexte d'exécution JavaScript.

   angularjs

Enfin, le navigateur restitue le texte.

liaison unique

Après cela,

implémente un mécanisme appelé 1.3. En substance, son mécanisme n’est pas très différent des deux autres méthodes, mais il se comporte différemment lors de la mise à jour des données. angularjsone-time-binding

enregistrera également

pour écouter les changements de données, mais il annulera la surveillance lorsqu'il détectera des données one-time-bindingnon définies$watch pour la première fois.

<span>{{::name}}</span>

对于上面的代码，假设 name 从 undefined -> angularjs -> angular ，最终渲染的结果是 angularjs ,而不是 angular 。 这就是 one-time-binding 的特殊之处，当 name 从 undefined 变化为 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的接口对象

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!