Portée angulaire
Dans les applications Web construites avec Angular, le concept de portée est tout au long de celui-ci. De nombreuses instructions dans la vue angulaire créeront une portée, telle que Ng-App, Ng-contrôleur, etc. Cette portée est $scope (version avant angulaire1.2), nous injectons lors de la rédaction de constructeurs de contrôleur. C'est un concept dans le modèle de vue. Notre modèle de données est défini dans la portée.
Fosse de portée angulaire
Les personnes qui ont utilisé Angular devraient passer par un processus, c'est-à-dire lorsqu'ils étaient novices au début, ils ont juste vu la liaison bidirectionnelle des données.
Pit de portée 1 dans Angular
Peu importe comment il a commencé à l'utiliser directement, il le lierait en une seule fois. Après la liaison, si vous avez de la chance (le vieil oiseau qui comprend le principe de la portée angulaire l'ignore), la liaison bidirectionnelle commencera à fonctionner comme prévu. Pour le moment, nous pensons également que nous sommes si puissants que nous pouvons réaliser si rapidement "liaison bidirectionnelle", qui est une nouvelle fonctionnalité dont il n'a pas été entendu parler.
Alors pourquoi ce qui précède dit que la liaison bidirectionnelle fonctionne correctement à cause de la bonne chance? Parce que lorsque les novices ont commencé à apprendre Angular, ils ont simplement lu le tutoriel et ont changé le code pour répondre à leurs besoins commerciaux. Même s'il y a des joueurs qui peuvent apprendre des documents officiels au début, ils sont toujours minoritaires. Par conséquent, la plupart des amis qui viennent d'apprendre Angular ne comprennent pas les principes, mais ils pensent qu'ils savent déjà les utiliser.
Après avoir dit tellement de choses, jetons un coup d'œil à la situation où un novice commence à spécifier un modèle de données dans la portée et à les lier dans des directions bidirectionnelles. Dans ce cas, vous rencontrerez les pièges mentionnés ci-dessus. Jetons un coup d'œil au code en premier.
// html <div ng-controller = "outerctrl"> <span ng-bind = "a"> </span> <div ng-controller = "innerctrl"> <span ng-bind = "a"> </span> <bouton ng-Click = "a = a + 1"> incrément </ bouton> </v> </v> OUTERCTRL ($ SCOPE) {$ SCOPE.A = 1;} fonction innerctrl () {}Le code ci-dessus est un exemple extrêmement simple de liaison bidirectionnelle. Une fois la page chargée, 1 sera affichée dans la div externe et la div interne. Lorsque le bouton d'incrément est enfoncé, vous constaterez que seul le 1 interne devient 2. Il en va de même pour continuer à appuyer, seul le nombre interne augmentera. Donc, pour le moment, les novices paniquent souvent. Qu'en est-il de la contrainte magique bidirectionnelle qui a été convenue?
Pit de portée 2 en angulaire
À cette époque, le bébé était un peu émotif. Il a marché stackoverflow et les documents officiels. Enfin, il a constaté qu'il y avait en effet une solution, comme la rédaction de A comme data.a attribut.a d'un objet:
// html <div ng-controller = "outerctrl"> <span ng-bind = "data.a"> </span> <div ng-controller = "innerctrl"> <span ng-bind = "data.a"> </ span> <button ng-click = "data.a = data.a + 1"> augmentation </ bouton> JavaScriptFunction outerCtrl ($ scope) {$ scope.data = {a: 1};} fonction innerctrl () {}Ensuite, j'ai trouvé que cela pouvait fonctionner et les deux nombres étaient incrémentés. J'étais le roi de la liaison à double sens ... puis je l'ai jeté de côté et j'ai continué à apprendre la partie suivante du tutoriel sans se soucier des principes spécifiques. C'est en fait mon parcours mental lorsque j'ai appris Angular pour la première fois. J'avais vraiment honte de faire l'application et de le déployer dans l'environnement de production avant de me souvenir d'étudier les principes internes.
La fosse doit toujours être remplie
J'ai dit tellement de bêtises et j'ai marché sur la fosse. Je suis entré dans l'étape de remplissage de la fosse, ce qui signifie que cette fosse peut être résolue par les attributs écrits comme objets. En fait, après avoir connu le principe, il est facile à comprendre. La portée intérieure et extérieure de l'angulaire est héritée par la chaîne prototype basée sur JavaScript, et seule la méthode de l'héritage de la chaîne prototype est utilisée. Les amis avec des bases JavaScript devraient pouvoir réagir instantanément. La valeur de type de référence dans l'objet prototype de sous-classe et la valeur de type de référence dans l'objet d'instance parent sont la même référence, et la valeur de type de base écrasera la valeur de type de base dans l'objet parent. C'est en fait la raison pour laquelle l'héritage de la combinaison existe, car le simple fait d'utiliser l'héritage de la chaîne prototype entraînera le problème d'appel, qui est un peu de grande envergure.
En bref, nous pouvons ici regarder le premier exemple comme suit:
Fonction OuterCtrl () {this.a = 1;} fonction innerctrl () {} var exter = new OUTERCTRL (); innerctrl.prototype = exter; var inner = new InnerCtrl (); inner.a = inner.a + 1; Ici, nous définissons l'objet prototype du constructeur du contrôleur interne sur un objet de portée externe, de sorte que l'objet de portée interne généré hérite de la propriété A dans l'objet externe extérieur. Cette propriété est une valeur de type de base. Lors de l'accès à la propriété A de l'objet interne, puisque l'objet interne lui-même n'a pas de tels attributs, il consultera à partir de son objet prototype. Il y a un tel attribut dans l'objet prototype extérieur, donc la valeur de retour n'est pas un problème, mais si nous attribuons la valeur à la propriété A de l'objet de portée interne, le problème se poserait. inner.a = inner.a + 1; Cette instruction procède en fait le processus mentionné ci-dessus pour trouver la valeur de la propriété A, puis attribue la valeur renvoyée à la propriété A de l'objet de portée interne. Étant donné que la propriété A n'existe pas, une propriété de valeur de base de base de A est créée, bloquant la propriété A dans l'extérieur de l'objet de portée externe, et cette fosse sort.
Par conséquent, si nous remplaçons l'attribut de valeur de type de base par l'attribut de valeur de type de référence, le problème peut être résolu, car les attributs correspondants des deux objets sont la même valeur de type de référence référencée, et peu importe où il est modifié, il se reflétera sur tous les objets qui se réfèrent à lui.
Résumer
Ce qui précède est tout au sujet des pièges auxquels il faut prêter attention à Angular. J'espère que le contenu de cet article sera utile à tout le monde pour en savoir plus sur la portée d'Angular.