Comment fonctionne la liaison de données de travail dans AngularJS?

https://stackoverflow.com//questions/9682092

13-12-2019
|

Question

Comment fonctionne la liaison de données de travail dans la AngularJS cadre?

Je n'ai pas trouvé de détails techniques sur leur site.C'est plus ou moins clair comment cela fonctionne quand des données sont reproduites à partir de la vue du modèle.Mais comment ne AngularJS suivi des modifications des propriétés du modèle sans les setters et getters?

J'ai trouvé qu'il y a JavaScript watchers qui peut faire ce travail.Mais ils ne sont pas pris en charge dans Internet Explorer 6 et Internet Explorer 7.Alors, comment est-AngularJS sais que j'ai changé les suivantes, par exemple et reflète ce changement à vue?

myobject.myproperty="new value";

La solution

AngularJS se souvient de la valeur et la compare à une valeur précédente.Ceci est fondamental sale de vérification.Si il y a un changement dans la valeur, puis il déclenche l'événement de changement.

L' $apply() la méthode, qui est ce que vous appelez lorsque vous passez d'un non-AngularJS monde dans un AngularJS monde, les appels $digest().Une empreinte est juste un bon vieux sale de vérification.Il fonctionne sur tous les navigateurs et est totalement prévisible.

Pour le contraste sale vérification (AngularJS) vs changement d'auditeurs (KnockoutJS et Backbone.js):Pendant sale-vérification peut sembler simple, et même inefficace (je vais répondre que plus tard), il s'avère qu'il est sémantiquement correct tout le temps, alors que le changement d'auditeurs ont beaucoup de bizarre, coin affaires et ont besoin de choses comme le suivi des dépendances pour le rendre plus sémantiquement correct.KnockoutJS le suivi des dépendances est une astucieuse fonction pour un problème qui AngularJS n'a pas.

Problèmes avec le changement des auditeurs:

La syntaxe est atroce, puisque les navigateurs ne prennent pas en charge nativement.Oui, il existe des proxys, mais ils ne sont pas sémantiquement correct dans tous les cas, et bien sûr il n'y a aucune procuration sur les anciens navigateurs.La ligne de fond est que sale-vérification vous permet de faire POJO, tandis que KnockoutJS et Backbone.js vous forcer à hériter de leurs classes, et d'accéder à vos données via les accesseurs.
Changement de coalescence.Supposons que vous avez un tableau d'éléments.Dites que vous voulez pour ajouter des éléments dans un tableau, comme vous êtes en boucle à ajouter, à chaque fois que vous ajoutez sont de déclencher des événements sur le changement, qui est le rendu de l'INTERFACE utilisateur.C'est très mauvais pour la performance.Ce que vous voulez est de mettre à jour l'INTERFACE utilisateur qu'une seule fois, à la fin.Les événements de changement sont trop fines.
Modifier les auditeurs feu immédiatement sur un setter, qui est un problème, depuis le changement auditeur peut plus modifier les données, qui se déclenche plus les événements de changement.C'est une mauvaise chose car sur votre tapis, vous pouvez avoir plusieurs événements de changement qui se passe à la fois.Supposons que vous avez deux tableaux qui doivent être synchronisées pour quelque raison que ce soit.Vous ne pouvez ajouter à l'un ou l'autre, mais à chaque fois que vous ajoutez le feu d'un événement de changement, qui a maintenant une incohérent de voir le monde.C'est un problème très similaire à filetage de verrouillage, qui JavaScript évite depuis chaque rappel exécute exclusivement et à la fin.Les événements de changement de briser ce depuis setters peut avoir de lourdes conséquences qui ne sont pas destinés et non évidente, ce qui crée le thread problème une fois de plus.Il s'avère que ce que vous voulez faire est de retarder l'auditeur de l'exécution, et de garantir que seul un auditeur s'exécute à un moment, d'où le code est libre de modifier des données, et il sait qu'aucun autre code s'exécute bien qu'il le fait.

Quid des performances?

Il peut donc sembler que nous sommes lents, depuis sale, le contrôle est inefficace.C'est là que nous avons besoin de regarder les nombres réels plutôt que des arguments théoriques, mais d'abord nous allons définir quelques contraintes.

Les humains sont:

Lent — Rien de plus rapide que de 50 ms est imperceptible pour les humains et peuvent donc être considérés comme des "instantanés".
Limitée — Vous ne pouvez vraiment montrer de plus que d'environ 2000 pièces de l'information, de l'homme sur une seule page.Rien de plus que c'est vraiment mauvais de l'INTERFACE utilisateur, et les humains ne peuvent pas traiter cela de toute façon.

Donc la vraie question est celle-ci:Combien de comparaisons peut-on faire sur un navigateur en 50 ms?C'est une question difficile à répondre, car de nombreux facteurs entrent en jeu, mais voici un cas de test: http://jsperf.com/angularjs-digest/6 ce qui crée de 10 000 observateurs.Sur un navigateur moderne, cela prend un peu moins de 6 ms.Sur Internet Explorer 8 il faut environ 40 ms.Comme vous pouvez le voir, ce n'est pas une question encore plus lent navigateurs de nos jours.Il y a une mise en garde:Les comparaisons doivent être simples à intégrer dans la limite de temps...Malheureusement, il est trop facile d'ajouter un lent comparaison dans AngularJS, de sorte qu'il est facile de construire des applications lentes lorsque vous ne savez pas ce que vous faites.Mais nous espérons avoir une réponse en fournissant un module d'instrumentation, qui serait de vous montrer qui sont la lenteur des comparaisons.

Il s'avère que les jeux vidéo et les Gpu utiliser la sale de vérification de l'approche, en particulier, car elle est cohérente.Aussi longtemps qu'ils obtiennent sur le taux de rafraîchissement du moniteur (généralement de 50 à 60 Hz, ou chaque 16.6-20 ms), toute la performance, qui est un déchet, alors vous êtes mieux de dessin plus de choses, que d'obtenir des FPS plus élevé.

Autres conseils

Misko déjà donné une excellente description de la façon dont les liaisons de données de travail, mais je voudrais ajouter mon point de vue sur le problème de performances avec la liaison de données.

Comme Misko a déclaré, autour de 2000 liaisons sont où vous commencez à voir les problèmes, mais vous ne devriez pas avoir plus de 2000 pièces de l'information sur une page de toute façon.Cela peut être vrai, mais pas tout de liaison de données est visible à l'utilisateur.Une fois que vous commencez à construire toute sorte de widget ou de grille de données avec les deux sens de la liaison, vous pouvez facilement hit 2000 liaisons, sans avoir une mauvaise EXPÉRIENCE.

Considérons, par exemple, une zone de liste déroulante où vous pouvez saisir du texte pour filtrer les options disponibles.Ce type de contrôle peut avoir ~150 articles et être encore très utilisable.Si il a une certaine fonctionnalité supplémentaire (par exemple une classe spécifique sur l'option actuellement sélectionnée) vous commencez à obtenir 3-5 liaisons par option.Mettre trois de ces widgets sur une page (par ex.pour en choisir un pays, l'autre pour sélectionner une ville dans le dit pays, et la troisième pour sélectionner un hôtel) et vous êtes quelque part entre 1000 et 2000 liaisons déjà.

Ou envisager une grille de données d'une application web.50 lignes par page n'est pas déraisonnable, ce qui aurait, de 10 à 20 colonnes.Si vous construisez ce avec ng-se répète, et/ou des renseignements dans certaines cellules qui utilise certaines liaisons, vous pourriez être près de 2000 liaisons avec cette grille seule.

Je trouve ce énorme problème lorsque l'on travaille avec AngularJS, et la seule solution que j'ai pu trouver jusqu'à présent est de construire des widgets sans l'aide de la liaison bidirectionnelle, au lieu d'utiliser ngOnce, révocation de l'enregistrement d'observateurs de et des astuces similaires, ou pour construire des directives qui permettent de construire les DOM avec jQuery et de manipulation du DOM.Je sens cela va à l'encontre de l'objectif de l'aide Angulaire en premier lieu.

J'aimerais entendre vos suggestions sur d'autres moyens de gérer cela, mais alors peut-être que je devrais écrire ma propre question.Je voulais mettre ça dans un commentaire, mais il s'est avéré être beaucoup trop long pour que...

TL;DR
La liaison de données peut causer des problèmes de performance sur des pages complexes.

Par sale la vérification de la `$scope` objet

Angulaire maintient une simple array des observateurs dans le $scope objets.Si vous inspectez tout $scope vous verrez qu'il contient un array appelé $$watchers.

Chaque observateur est un object qui contient, entre autres choses

Une expression dont l'observateur est le suivi.C'est peut-être juste une attribute nom, ou quelque chose de plus compliqué.
Une dernière valeur connue de l'expression.Cela peut être vérifié à contre-courant calculé la valeur de l'expression.Si les valeurs diffèrent l'observateur va déclencher la fonction et la marque de la $scope comme sale.
Une fonction qui sera exécutée si l'observateur est sale.

Comment les observateurs sont définis

Il existe de nombreuses façons de définir un observateur en AngularJS.

Vous pouvez explicitement $watch un attribute sur $scope.
```
$scope.$watch('person.username', validateUnique);
```
Vous pouvez placer un {{}} l'interpolation dans votre modèle (un observateur sera créé pour vous sur le courant $scope).
```
<p>username: {{person.username}}</p>
```
Vous pouvez demander une directive telle que ng-model pour définir le watcher pour vous.
```
<input ng-model="person.username" />
```

L' `$digest` cycle de vérifications de tous les observateurs à l'encontre de leur dernière valeur

Lorsque nous interagissons avec AngularJS par les voies habituelles (ng-model, ng-repeat, etc) un recueil de cycle est déclenché par la directive.

Un condensé du cycle est un la profondeur de la première traversée de $scope et tous ses enfants.Pour chaque $scope object, nous itérer sur son $$watchers array et d'évaluer toutes les expressions.Si la nouvelle valeur de l'expression est différente de la dernière valeur connue, l'observateur de la fonction est appelée.Cette fonction peut recompiler le cadre de la DOM, recalculer une valeur sur $scope, déclencher une AJAX request, tout ce dont vous avez besoin.

Chaque champ est traversé et chaque montre expression évaluée et vérifiée par rapport à la dernière valeur.

Si un observateur est déclenchée, le `$scope` est sale

Si un observateur est déclenchée, l'application sait quelque chose a changé, et le $scope est marqué comme sale.

L'observateur de fonctions pouvez modifier d'autres attributs sur $scope ou sur un parent $scope.Si l'on $watcher la fonction a été déclenchée, nous ne pouvons pas garantir que nos autres $scopes sont encore propres, et ainsi nous réalisons l'ensemble de digérer le cycle de nouveau.

C'est parce que AngularJS a deux voies de liaison, de sorte que les données peuvent être transmises jusqu'à la $scope d'arbre en arbre.Nous pouvons modifier une valeur plus élevée $scope qui a déjà été digéré.Nous avons peut-être modifier une valeur sur le $rootScope.

Si l' `$digest` est sale, nous réalisons l'ensemble de la `$digest` nouveau cycle

Nous avons continuellement en boucle par le biais de la $digest cycle jusqu'à ce que le digérer cycle vient nettoyer (tous les $watch expressions ont la même valeur que celle qu'ils avaient dans le cycle précédent), ou nous arrivons à le digérer limite.Par défaut, cette limite est fixée à 10.

Si nous arrivons à le digérer limite AngularJS va générer une erreur dans la console:

10 $digest() iterations reached. Aborting!

Le recueil est dur sur la machine, mais facile sur le développeur

Comme vous pouvez le voir, chaque fois que quelque chose change dans une application AngularJS, AngularJS va vérifier chaque guetteur de l' $scope hiérarchie pour voir comment réagir.Pour un développeur c'est un énorme productivité boon, que vous devez maintenant écrire presque pas de code de câblage, AngularJS sera juste un avis, si une valeur a changé, et faire le reste de l'application compatible avec le changement.

Du point de vue de la machine si cela est très inefficace et lente de notre application vers le bas si nous créer un trop grand nombre d'observateurs.Misko a cité un chiffre de près de 4000 observateurs avant que votre application va se sentir lent sur les navigateurs plus anciens.

Cette limite est facile à atteindre si vous ng-repeat sur une grande JSON array par exemple.Vous pouvez atténuer cette utilisation des fonctionnalités comme l'une liaison au moment de la compilation d'un modèle sans la création d'observateurs.

Comment faire pour éviter de créer trop d'observateurs

Chaque fois que votre utilisateur interagit avec votre application, chaque observateur dans votre application sera évaluée au moins une fois.Une grande partie de l'optimisation d'une application AngularJS est de réduire le nombre de veilleurs dans votre $scope d'arbre en arbre.Un moyen facile de le faire est avec une fois la liaison.

Si vous avez des données qui changent rarement, vous pouvez lier qu'une seule fois à l'aide de l' ::la syntaxe, comme suit:

<p>{{::person.username}}</p>

<p ng-bind="::person.username"></p>

La liaison ne sera déclenchée que lorsque le contenant modèle est rendu et les données chargées dans $scope.

Ceci est particulièrement important lorsque vous avez un ng-repeat avec de nombreux articles.

<div ng-repeat="person in people track by username">
  {{::person.username}}
</div>

C'est ma compréhension de base.Il peut très bien être faux!

Les éléments sont surveillés par le passage d'une fonction (retour de la chose regardé) à l' $watch la méthode.
Les changements de regardé les articles doivent être effectuées dans un bloc de code enveloppé par la $apply la méthode.
À la fin de la $apply l' $digest la méthode est invoquée qui va sur chacune des montres et des vérifications pour voir si ils ont changé depuis la dernière fois que le $digest couru.
Si des modifications sont trouvées, le digest est invoqué à nouveau jusqu'à ce que tous les changements se stabiliser.

Dans le développement normal, la syntaxe de liaison de données dans le code HTML raconte l'AngularJS compilateur pour créer des montres pour vous, le contrôleur et les méthodes sont exécutées à l'intérieur d' $apply déjà.Donc, pour le développeur de l'application, il est tout transparent.

Je me demandais moi-même pendant un certain temps.Sans setters comment AngularJS avis de changements à la $scope l'objet?Est-il un sondage d'eux?

Ce qu'il fait n'est-ce:Toute "normale" lieu de modifier le modèle a déjà été appelée à partir des entrailles de AngularJS, de sorte qu'il appelle automatiquement $apply pour vous après votre code s'exécute.Dire votre contrôleur a une méthode qui est accro à ng-click sur certains éléments.Parce que AngularJS fils de l'appel de cette méthode pour vous, il a une chance de faire un $apply dans l'endroit approprié.De même, pour les expressions qui apparaissent dans les vues, celles qui sont exécutées par AngularJS donc, il ne l' $apply.

Lorsque la documentation parle d'avoir à appeler $apply manuellement pour le code en dehors de AngularJS, il parle de code qui, lorsqu'il est exécuté, n'a pas de tige de AngularJS lui-même dans la pile d'appel.

Expliquer avec des Photos :

De Liaison de données a besoin d'une cartographie

La référence dans le champ d'application n'est pas exactement la référence dans le modèle.Lorsque vous avez des données-lier deux objets, vous avez besoin d'un troisième qui écoutent de la première et de modifier les autres.

Ici, lorsque vous modifiez la <input>, vous touchez la données ref3.Et le classique data-bind mécanisme va changer données ref4.Alors, comment les autres {{data}} les expressions peuvent se déplacer ?

Événements conduit à $digest()

Angulaire maintient un oldValue et newValue de chaque liaison.Et après chaque Angulaire de l'événement, le célèbre $digest() boucle de vérifier la liste de surveillance pour voir si quelque chose a changé.Ces Angulaire des événements sont ng-click, ng-change, $http terminé ...L' $digest() en boucle aussi longtemps que oldValue diffère de la newValue.

Dans la photo précédente, il remarque que les données-ref1 et données-ref2 a changé.

Conclusions

C'est un peu comme l'Œuf et de Poulet.Vous ne savez jamais qui commence, mais j'espère qu'il fonctionne la plupart du temps comme prévu.

L'autre point est que vous pouvez comprendre facilement l'impact profond d'une fixation simple sur la mémoire et le PROCESSEUR.Espérons que les postes de travail sont assez grasses pour gérer cela.Les téléphones mobiles ne sont pas forts.

Évidemment, il n'y a pas de vérification périodique de Scope si il n'y a aucun changement dans les Objets attachés à elle.Pas tous les objets attachés à la portée regardé .Portée fait maintient un $$watchers . Scope seulement parcourt cette $$watchers lorsque $digest est appelé .

Angulaire ajoute un observateur à l' $$watchers pour chacun de ces

{{expression}} — Dans vos templates (et partout ailleurs où il y a une expression) ou lorsque nous définissons ng-model.

$scope.$montre(‘expression de la fonction/’) — Dans votre code JavaScript, on peut juste l'attacher à un objet de l'étendue angulaire de la montre.

$watch la fonction prend trois paramètres:

Le premier est un observateur de la fonction qui retourne l'objet ou il suffit d'ajouter une expression.

Seconde est une fonction d'écoute qui sera appelé quand il y a un changement dans l'objet.Toutes les choses que comme DOM changements seront mis en œuvre dans cette fonction.

Le troisième étant un paramètre facultatif qui prend la forme d'un booléen .Si c'est vrai , angulaire profonde montres de l'objet et si ses faux Angulaire tout simplement une référence en regardant sur l'objet.Rugueux de la mise en Œuvre de dollars de la montre ressemble à ceci

Scope.prototype.$watch = function(watchFn, listenerFn) {
   var watcher = {
       watchFn: watchFn,
       listenerFn: listenerFn || function() { },
       last: initWatchVal  // initWatchVal is typically undefined
   };
   this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers  
};

Il y a une chose intéressante dans Angulaire appelé Digérer Cycle.L' $digest cycle commence comme un résultat d'un appel à $scope.$digest().Supposons que vous modifiez un $champ d'application du modèle dans une fonction de gestionnaire à travers le ng-cliquez sur la directive.Dans ce cas, AngularJS déclenche automatiquement un $digest cycle en appelant $digest().En plus de ng-click, il existe plusieurs autres intégrée dans les directives/services qui vous permettent de modifier les modèles (par ex.ng-model, $timeout, etc) et de déclencher automatiquement un $digest cycle.La rudesse de la mise en œuvre de $digest ressemble à ceci.

Scope.prototype.$digest = function() {
      var dirty;
      do {
          dirty = this.$$digestOnce();
      } while (dirty);
}
Scope.prototype.$$digestOnce = function() {
   var self = this;
   var newValue, oldValue, dirty;
   _.forEach(this.$$watchers, function(watcher) {
          newValue = watcher.watchFn(self);
          oldValue = watcher.last;   // It just remembers the last value for dirty checking
          if (newValue !== oldValue) { //Dirty checking of References 
   // For Deep checking the object , code of Value     
   // based checking of Object should be implemented here
             watcher.last = newValue;
             watcher.listenerFn(newValue,
                  (oldValue === initWatchVal ? newValue : oldValue),
                   self);
          dirty = true;
          }
     });
   return dirty;
 };

Si nous utilisons JavaScript setTimeout() la fonction de mise à jour de la portée du modèle, Angulaire a aucun moyen de savoir ce que vous pouvez changer.Dans ce cas, il est de notre responsabilité de faire appel $apply() manuellement, ce qui déclenche un $digest cycle.De même, si vous avez une directive qui définit un DOM écouteur d'événements et de changements de certains modèles à l'intérieur de la fonction de gestionnaire, vous devez appeler $apply() pour vérifier que les modifications prennent effet.La grande idée de $s'appliquent, c'est que nous pouvons exécuter du code qui n'est pas conscient de Anguleuses, que le code peut encore changer les choses sur le champ.Si nous envelopper ce code dans $s'appliquent , il prendra soin de l'appel de $digest().Rugueux de la mise en œuvre de $apply().

Scope.prototype.$apply = function(expr) {
       try {
         return this.$eval(expr); //Evaluating code in the context of Scope
       } finally {
         this.$digest();
       }
};

AngularJS traiter les données-le mécanisme de liaison avec l'aide de trois fonctions puissantes : $watch(),$digest()et $apply().La plupart du temps AngularJS va appeler le $scope.$watch() et $scope.$digest(), mais dans certains cas, vous pouvez avoir à faire appel à ces fonctions manuellement à la mise à jour avec de nouvelles valeurs.

$watch() :-

Cette fonction est utilisée pour observer les changements dans une variable $scope.Elle accepte trois paramètres:l'expression, l'auditeur et de l'égalité de l'objet, où l'auditeur et de l'égalité de l'objet sont des paramètres facultatifs.

$digest() -

Cette fonction parcourt toutes les montres de la $objet de l'étendue, et son enfant $objets de portée
(si il en possède).Lorsque $digest() effectue une itération sur les montres, il vérifie si la valeur de l'expression a changé.Si la valeur a changé, AngularJS appels à l'auditeur une valeur nouvelle et l'ancienne valeur.L' $digest() la fonction est appelée chaque fois que AngularJS pense que c'est nécessaire.Par exemple, après un bouton cliquez sur, ou après un appel AJAX.Vous pouvez avoir certains cas où AngularJS n'appelez pas les $digest() fonctionne pour vous.Dans ce cas, vous avez pour composez vous-même.

$apply() -

Angulaire faire l'auto-magiquement met uniquement à jour les changements de modèle qui sont à l'intérieur de AngularJS contexte.Lorsque vous effectuez le changement dans n'importe quel modèle à l'extérieur de l'angle de contexte (comme le navigateur d'événements DOM, setTimeout, XHR ou troisième bibliothèques de tiers), alors vous devez informer Angulaire des modifications par l'appel de $apply() manuellement.Lorsque l' $apply() appel de fonction finitions AngularJS appelle $digest() en interne, de sorte que toutes les liaisons de données sont mis à jour.

Il est arrivé que j'ai besoin de lier un modèle de données d'une personne avec un formulaire, ce que j'ai fait était un mappage direct des données avec le formulaire.

Par exemple, si le modèle avait quelque chose comme:

$scope.model.people.name

L'entrée de commande de la forme:

<input type="text" name="namePeople" model="model.people.name">

De cette façon, si vous modifiez la valeur de l'objet du contrôleur, ce qui se reflète automatiquement dans la vue.

Un exemple où j'ai passé le modèle est mis à jour à partir des données du serveur, c'est quand vous demandez un code postal et le code postal sur charge une liste des colonies et des villes associées à ce point de vue, et par défaut, définir la première valeur à l'utilisateur.Et ce que j'ai travaillé très bien, ce qui arrive, c'est que angularJS faut parfois quelques secondes pour actualiser le modèle, pour ce faire, vous pouvez mettre un compteur lors de l'affichage des données.

La voie de liaison de données est une approche dans laquelle une valeur est prise à partir du modèle de données et inséré dans un élément HTML.Il n'y a aucun moyen de mettre à jour le modèle de la vue.Il est utilisé dans la musique classique, le modèle des systèmes.Ces systèmes de liaison de données dans une seule direction.
De liaison de données dans Angulaire apps est la synchronisation automatique des données entre le modèle et la vue des composants.

La liaison de données permet de traiter le modèle comme la source unique de la vérité dans votre application.La vue est une projection du modèle à toutes les époques.Si le modèle est modifié, le point de vue reflète le changement et vice versa.

Voici un exemple de la liaison de données avec AngularJS, à l'aide d'un champ de saisie.Je l'expliquerai plus tard

Code HTML

<div ng-app="myApp" ng-controller="myCtrl" class="formInput">
     <input type="text" ng-model="watchInput" Placeholder="type something"/>
     <p>{{watchInput}}</p> 
</div>

Code AngularJS

myApp = angular.module ("myApp", []);
myApp.controller("myCtrl", ["$scope", function($scope){
  //Your Controller code goes here
}]);

Comme vous pouvez le voir dans l'exemple ci-dessus, AngularJS utilise ng-model d'écouter et de regarder ce qui se passe sur les éléments HTML, en particulier sur input champs.Quand il se passe quelque chose, faire quelque chose.Dans notre cas, ng-model est lier à notre point de vue, en utilisant la notation moustache {{}}.Tout ce qui est tapé à l'intérieur du champ de saisie est affiché sur l'écran instantanément.Et c'est la beauté de la liaison de données, en utilisant AngularJS dans sa forme la plus simple.

Espérons que cette aide.

Voir un exemple ici sur Codepen

AngularJs prend en charge Les deux sens de la liaison de données.
Signifie que vous pouvez accéder à des données Affichage -> Contrôleur & Contrôleur -> Voir

Pour Ex.

// If $scope have some value in Controller. 
$scope.name = "Peter";

// HTML
<div> {{ name }} </div>

O/P

Peter

Vous pouvez lier des données dans ng-model Comme par exemple:-
2)

<input ng-model="name" />

<div> {{ name }} </div>

Ici dans l'exemple ci-dessus, quelle que soit l'entrée de l'utilisateur donnera, Il sera visible dans <div> la balise.

Si vous voulez lier d'entrée du code html de contrôleur:-
3)

<form name="myForm" ng-submit="registration()">
   <label> Name </lbel>
   <input ng-model="name" />
</form>

Ici si vous souhaitez utiliser l'entrée name dans le contrôleur,

$scope.name = {};

$scope.registration = function() {
   console.log("You will get the name here ", $scope.name);
};

ng-model lie notre point de vue et de les rendre dans l'expression {{ }}.
ng-model les données qui est montré à l'utilisateur dans la vue et avec laquelle l'utilisateur interagit.
De sorte qu'il est facile de lier des données à AngularJs.

Angular.js crée un observateur pour chaque modèle, nous avons créer dans la vue.Chaque fois qu'un modèle est modifié, une "ng-sale" la classe est appeneded pour le modèle, de sorte que le spectateur s'engagent à respecter tous les modèles qui ont la classe "ng-sale" & mise à jour de leurs valeurs dans le contrôleur et vice-versa.

liaison de données:

Qu'est-ce que la liaison de données?

Chaque fois que l'utilisateur modifie les données de la vue , il se produit une mise à jour de ce changement dans le champ d'application du modèle, et vice-versa.

Comment est-il possible?

Réponse courte : Avec l'aide de digérer cycle.

Description : Angular js jeux de l'observateur sur le champ d'application du modèle, qui se déclenche la fonction d'écoute si il y a un changement dans le modèle.

$scope.$watch('modelVar' , function(newValue,oldValue){

//Dom code de mise à jour avec la nouvelle valeur

});

Oui, Quand et Comment est l'observateur de la fonction appelée?

L'observateur de la fonction est appelée dans le cadre du recueil de cycle.

Digest cycle est appelé automatiquement déclenchée dans le cadre de angular js construit dans les directives de la/des services comme ng-model , ng-bind , $timeout, ng-click et les autres..qui vous permettent de déclencher l'empreinte de cycle.

Digérer la fonction de cycle:

$scope.$digest() -> digest cycle against the current scope.
$scope.$apply() -> digest cycle against the parent scope

j'.e$rootScope.$apply()

Note:$apply() est égal à $rootScope.$digest() cela signifie que le sale vérification commence à partir de la racine ou le haut ou le parent à la portée de tout le enfant $étendues dans le angular js application.

Les caractéristiques ci-dessus travail dans les navigateurs IE pour les versions indiquées également en s'assurant simplement que votre application est angular js application qui signifie que vous êtes en utilisant le framework angularjs fichier de script référencé dans la balise script.

Je vous remercie.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow