En ce qui concerne AngularJS, la première chose à laquelle nous pensons est probablement le système de liaison et d'instructions bidirectionnelle, qui sont également les aspects les plus attractifs d'AngularJS. Quant à la liaison des données bidirectionnelle, je pense qu'il n'y a rien à dire. Aujourd'hui, nous discuterons brièvement du système d'instructions du cadre AngularJS. Je suis également débutant et j'ai consulté certaines informations. S'il y a de mauvaises choses, Wan Wang l'a souligné.
Les directives sont la partie la plus importante d'AngularJS, donc ce cadre lui-même est livré avec plus d'instructions, mais en développement, ces instructions ne peuvent généralement pas répondre à nos besoins, nous devons donc également personnaliser certaines instructions. Ensuite, une directive AngularJS peut avoir quatre formes d'expression dans le code HTML:
1. Utiliser comme nouvel élément HTML.
<Lello> </ Hello> ou <Hello />
2. Utiliser comme attribut d'un élément
<div hello> </div>
3. Utiliser comme classe d'élément
<div> </div>
4. Utiliser comme commentaires
<! - Directive: Bonjour ->
Notez qu'il y a un piège ici, qui est d'avoir un espace après "Directive: Hello", sinon ce sera inutile. Dans le même temps, il est recommandé d'utiliser moins de méthodes d'annotation. Si vous devez poursuivre de haute qualité, alors soyez décontracté. Étant donné que les instructions ont les quatre formes d'expression ci-dessus, comment les définissent-elles spécifiquement?
.Directive ('Hello', function () {return {restrict: 'aecm', modèle: '<fontificateur> cliquez sur moi </utton>'}})Ce qui précède est le code le plus simple pour définir une directive, sans aucun doute. Dans le code ci-dessus, la méthode directive () définit une nouvelle instruction. La méthode a deux paramètres. Le premier «bonjour» est de spécifier que le nom de l'instruction est bonjour et que le deuxième paramètre est la fonction qui renvoie l'objet d'instruction. Ainsi, dans le code ci-dessus, la fonction utilise principalement deux propriétés pour définir cette directive Hello:
1. L'attribut restreint [String] est principalement utilisé pour spécifier quelle forme d'expressions peut être utilisée dans le code HTML. A représente les attributs, E représente les éléments, C représente les classes et M représente les commentaires. Dans les situations réelles, nous utilisons généralement les deux méthodes d'AE.
2. L'attribut modèle [string ou fonction] spécifie le balisage HTML généré par la commande après avoir été compilé et lié par Angular. Cet attribut peut être aussi simple qu'un seul texte HTML à l'intérieur, ou il peut être particulièrement complexe. Lorsque la valeur de l'attribut est la fonction, la méthode renvoie une chaîne représentant le modèle, et l'expression {{}} peut également y être utilisée.
modèle: function () {return '<fontificateur> Cliquez sur moi </fontificateur>'; }Mais en général, l'attribut de modèle sera remplacé par TemplateUrl, et il est utilisé pour pointer une adresse de fichier externe, nous plaçons donc généralement le modèle dans un fichier HTML externe, puis utilisons TemplateUrl pour le pointer.
Lors de la définition des instructions, en plus des deux attributs les plus basiques ci-dessus, nous utiliserons également de nombreux autres attributs. Alors parlons d'eux un par un:
1. Attribut de priorité [numéro], cet attribut est utilisé pour spécifier la priorité des instructions personnalisées. Lorsqu'il y a plusieurs instructions sur un élément DOM, vous devez comparer la priorité des instructions. Les instructions avec une priorité plus élevée sont d'abord exécutées. Cette priorité est utilisée pour trier la fonction de compilation avant d'exécuter l'instruction. Nous allons donc parler attentivement de la fonction compilée ci-dessous.
2. Attribut Terminal [Boolean], ce paramètre est utilisé pour définir l'opportunité d'arrêter les instructions sur l'élément actuel qui ont une priorité inférieure à cette instruction. Si la valeur est vraie, elle est normale. Il est exécuté dans l'ordre de priorité. S'il est défini sur False, les instructions sur l'élément actuel qui ont une priorité inférieure à cette instruction ne seront pas exécutées.
3. Remplacer l'attribut [boolean], cet attribut est utilisé pour spécifier si le contenu HTML généré remplacera l'élément HTML qui définit cette directive. Lorsque nous définissons la valeur de cette propriété sur true, ouvrez la console et la regardons, vous constaterez que l'élément généré par cette instruction ressemblera à ceci:
Lorsque nous nous sommes mis à faux, cela ressemblera à ceci:
.
4. Attribut link [function]. Dans l'exemple ci-dessus, la commande que nous avons personnalisée n'a pas beaucoup de sens. Ceci est juste la commande la plus simple. Il y a de nombreux attributs que nous n'avons pas définis pour cela, donc il n'est pas très utile. Par exemple, cette fonction de liaison comprend trois paramètres: Scope, élément et Attrs. Cette fonction de liaison est principalement utilisée pour ajouter une surveillance des événements aux éléments DOM, les modifications des attributs du modèle de surveillance et mettre à jour DOM. Il a trois paramètres:
1: Paramètre de portée. Lorsque nous ne définissons pas les attributs de portée pour l'instruction, il représente la portée du contrôleur parent.
2: Le paramètre de l'élément est le JQLite (un sous-ensemble de jQuery) de l'instruction pour envelopper l'élément DOM. Si vous avez introduit JQuery avant d'introduire AngularJS, alors cet élément est l'élément jQuery, pas l'élément JQLite. Étant donné que cet élément a été enveloppé par jQuery / JQLite, nous n'avons plus besoin d'utiliser $ () pour l'envelopper lors de l'exécution des opérations DOM.
Trois: Le paramètre Attrs, qui contient l'objet de paramètre standardisé des attributs de l'élément où se trouve la directive.
5. L'attribut de portée [boolean ou objet] est utilisé pour définir la portée de l'instruction. C'est faux par défaut. C'est-à-dire que l'instruction hérite de la portée du contrôleur parent. Vous pouvez utiliser les attributs dans la portée du contrôleur parent à volonté, mais de cette manière, il polluera les attributs de la portée des parents, ce qui n'est pas conseillé. Nous pouvons donc laisser Scope prendre les deux valeurs suivantes: true et {}.
Lorsqu'il est vrai, cela signifie qu'Angular crée une portée héritée de la portée des parents pour l'instruction.
var myapp = angular.module ('myapp', []) .Controller ('myctrl', ['$ scope', function ($ scope) {$ scope.color = 'red';}]) .directive ('hello', function () {return {restrict: 'aecm', replace: true: template: '<bouton ng-click = "sayhello ()" Style = "Background-Color: {{Color}}"> Cliquez sur moi </fontificateur> ', Scope: true, link: function (scope, elements, attrs) {elements.bind (' click ', function () {elements.css (' background-Color ',' Blue ');})}}}))Ici, nous définissons un attribut de couleur pour la portée des parents et l'avons attribué au rouge. Dans l'attribut de portée de la directive Hello, nous donnons vrai, donc Angular crée une portée héritée de la portée des parents pour cette directive. Ensuite, dans l'attribut de modèle, nous utilisons {{}} pour utiliser l'attribut de couleur hérité de la portée du parent, de sorte que le bouton sera rouge.
Lorsque {}, cela signifie qu'une portée isolée est créée et que les propriétés de la portée des parents ne seront pas héritées. Mais parfois, nous devons également accéder aux propriétés ou méthodes dans la portée des parents, alors que devons-nous faire? Angular y a longtemps réfléchi. Il existe trois façons de se souvenir des opérations ci-dessus:
1: Utilisez @ pour implémenter la liaison à sens unique. Si nous ne donnons que la portée de cette valeur {}, la couleur d'arrière-plan du bouton dans le code ci-dessus sera gris. , et si nous devons utiliser l'attribut de couleur de la portée des parents, nous pouvons écrire ceci:
Scope {Color: '@ Color'} <Hello Color = "{{Color}}"> </ Hello>Il y a deux points à noter ici: 1. La couleur de la propriété dans la portée représente la couleur de l'expression {{}}, et les deux doivent être cohérentes. 2. La valeur de la couleur d'attribut dans la portée, c'est-à-dire la couleur après @, représente la couleur d'attribut dans l'élément HTML ci-dessous, donc les deux doivent également être cohérents. Si le nom d'attribut ici est le même que le nom utilisé dans l'expression {{}} dans le modèle, le nom d'attribut après @ peut être omis et écrit dans la forme suivante.
Scope {couleur: '@'}D'après la valeur de la portée dans l'instruction, on peut voir que la couleur de l'expression {{}} dans le modèle d'instruction pointe vers l'attribut de couleur de l'élément actuel, et la valeur de cet attribut de couleur est la valeur de la couleur de la propriété de la portée du parent. La portée du parent transmet sa valeur d'attribut de couleur à l'attribut de couleur de l'élément actuel, puis l'attribut de couleur transmet la valeur à la couleur dans l'expression dans le modèle. Ce processus est à sens unique.
Deux: use = pour implémenter une liaison bidirectionnelle
.Directive ('Hello', function () {return {restrict: 'aecm', remplacer: true, template: '<button style = "background-color: {{colore}}"> cliquez moi </ / bouton>', scope: {couleur: '='}, link: function (scope, elements, attrs) {elements.bind ('clique elements.css ('background-color', 'bleu');<Hello Color = "Color"> </ Hello> <Input Type = "Text" ng-model = "Color" />
Ici, nous avons une liaison bidirectionnelle l'attribut de couleur dans la portée de l'instruction et l'attribut de couleur dans la portée du parent, et ajoutez un événement de clic à la fonction de liaison de l'instruction. Cliquer sur le bouton modifiera la couleur du bouton et modifiera la valeur de l'attribut de couleur de la portée d'instruction, puis ajoutez une balise d'entrée à la page HTML, sortie ou entrée la valeur de l'attribut de couleur de la portée parent. Il y a un endroit pour noter ici: la valeur du nom d'attribut de l'élément actuel n'a pas besoin d'ajouter l'expression {{}}, car la portée parent transmet ici un modèle de données de portée réel, et non une chaîne simple, afin que nous puissions passer des chaînes simples, des tableaux et même des objets complexes à la portée de l'instruction. Voyons maintenant ce qui se passe lorsque vous cliquez sur ce bouton.
Ici, nous pouvons voir que la couleur du bouton a changé en rose, ce qui signifie que le clic modifie l'attribut de couleur de la portée de la commande, ce qui fait changer la couleur du bouton. Mais voici seulement le bouton qui a changé. Faites attention à la valeur dans la forme d'entrée est également devenue rose, ce qui signifie que l'attribut de couleur de la portée des parents a également changé. De plus, entrons une couleur dans l'entrée pour voir quels changements se sont produits.
, on peut voir que lorsque nous entrons dans une autre couleur dans la forme, la couleur du bouton change également, ce qui signifie que l'attribut de couleur de la portée de la commande a été modifié. En résumé, nous pouvons constater que l'utilisation de '=' est une liaison bidirectionnelle.
Trois: utilisez et appelez la méthode dans la portée des parents
var myapp = angular.module ('myapp', []) .Controller ('myctrl', ['$ scope', function ($ scope) {$ scope.color = 'red'; $ scope.sayhello = function () {alert (Hello ');};}]. Remplace: TRUE, modèle: '<bouton ng-Click = "Sayhello ()" style = "background-Color: {{Color}}"> Cliquez sur moi </futton>', Scope: {Color: '=', Sayhello: '&'}, link: function (Scope, Elements, attrs) {elements.bind ('Click', fonction () {) elements.css ('background-color', 'bleu');<Hello Color = "Color" Sayshello = "Sayhello ()"> </ Hello> <Input Type = "Text" ng-model = "Color" />
Ici, nous avons également deux choses à noter: 1. Nous devons non seulement utiliser la directive NG-Click dans le modèle pour lier la méthode de la portée des parents à appeler, mais également ajouter une propriété à l'élément actuel, et cette propriété pointe la méthode de la portée des parents à appeler. 2. Les trois de l'attribut de l'étendue de l'instruction Sayshello, l'attribut actuel de l'élément Sayshello, et le nom de la méthode d'événement qui lie le modèle doit être cohérent. Ensuite, nous pouvons cliquer sur le bouton et une boîte de dialogue apparaît.
6. Attribut transclude [boolean], cet attribut est utilisé pour nous permettre de spécifier si la directive peut contenir un contenu
.Directive ('Hello', function () {return {restrict: 'aecm', remplacer: true, transclude: true, scope: {}, modèle: '<div ng-transclude> </div>',}}) <Lello> Hello <span> {{Color}} </span> </ Hello>Lorsque sa valeur est vraie, il s'agit de la sortie de valeur sur la page. Lorsqu'il est faux, la page sera vide. Il y a un endroit où faire attention ici, qui est <span> {{Color}} </span>. La couleur ici est la couleur de la portée des parents. Ce n'est pas l'attribut de couleur de la portée de la directive.
7. Paramètre de compilation [fonction]. Cette méthode a deux élément de paramètres, attrs. Le premier élément de paramètre fait référence à l'élément où se trouve l'instruction, et les seconds attributions se réfèrent à la liste standardisée des paramètres attribués sur l'élément. Ici, nous avons également un endroit pour noter: la fonction de compilation ne peut pas accéder à la portée et devons renvoyer une fonction de liaison. Cependant, si la fonction de compilation n'est pas définie, vous pouvez configurer normalement la fonction de liaison (avec compilation, vous ne pouvez pas utiliser le lien, la fonction de liaison est renvoyée par compilation).
.directive('hello', function () { return{ restrict:'AECM', replace:true, translate:true, template:'<button ng-click="sayhello()" style="background-color: {{color}}">click me</button>', scope:{ color:'=', sayhello:'&' }, compile: function (element,attrs) { return function (scope, elements, attrs) {elements.bind ('click', function () {elements.css ('background-color', 'blue'); scope. $ applique (function () {scope.color = 'rose';})})};Maintenant, cliquez sur ce bouton
Nous avons constaté que ce qui s'était passé après avoir cliqué sur le bouton ici est le même que celui qui a utilisé l'attribut de lien auparavant, et il n'y a en fait pas beaucoup de différence.
En fait, dans la plupart des cas, nous n'avons qu'à utiliser la fonction de liaison. En effet, la plupart des instructions doivent seulement envisager d'enregistrer l'écoute des événements, le modèle de surveillance et la mise à jour de DOM, ce qui peut être effectué dans les fonctions de liaison. Cependant, pour des instructions comme Ng-Repeat, les éléments DOM doivent être clonés et répétés plusieurs fois, et la fonction de compilation est effectuée avant l'exécution de la fonction de liaison. Alors pourquoi avons-nous besoin de deux fonctions distinctes pour compléter le processus de génération, et pourquoi ne pouvons-nous pas en utiliser un? Pour bien répondre à cette question, nous devons comprendre comment les directives sont compilées dans Angular!
8. Comment les instructions sont-elles compilées
Lorsque notre démarrage d'application angulaire est démarré, Angular utilisera le service de compilation $ pour traverser l'élément DOM. Une fois que toutes les instructions sont reconnues, la méthode de compilation de l'instruction sera appelée, une fonction de liaison sera renvoyée, puis la fonction de liaison sera ajoutée à la liste des fonctions de liaison exécutées ultérieurement. Ce processus est appelé étape de compilation. Des instructions comme Ng-Repeat doivent être répétées et clonées plusieurs fois. La fonction de compilation n'est exécutée qu'une seule fois pendant l'étage de compilation et ces modèles sont copiés, mais la fonction de liaison est exécutée pour chaque instance copiée. Nous pouvons donc le gérer séparément pour améliorer nos performances (cette phrase est un peu irréaliste, je l'ai copiée d'autres endroits.
9. Contrôleur [String ou Fonction] et nécessitent des paramètres [String ou String []]. Lorsque nous voulons permettre à d'autres instructions d'interagir avec vos instructions, nous devons utiliser la fonction du contrôleur. Lorsqu'une autre directive souhaite interagir, elle doit déclarer sa référence à l'instance du contrôleur de votre directive.
.Directive ('Hello', function () {return {scope: {}, exiger: '^ he', compile: function (élément, attrs) {return function (scope, element ($ scope, $ compile, $ http) {this.fn = function () {alert ('hello');<HE> <Hello Color = "Color" Sayshello = "Sayhello ()"> </lolo> </HE>
Lorsque la page est chargée, une boîte de dialogue apparaîtra.
Eh bien, ce qui précède est ce que j'ai appris sur les instructions que j'ai apprises pendant cette période. Écrivons celui-ci.
L'analyse complète ci-dessus des instructions dans AngularJS (doit lire) est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.