Ce tutoriel utilise la version angularjs: 1.5.3
Angularjs Github: https://github.com/angular/angular.js/
Angularjs Télécharger l'adresse: https://angularjs.org/
Résumé: Directive (instructions) L'auteur estime qu'il est l'une des fonctions très puissantes et utiles d'AngularJ. Il équivaut à rédiger un élément DOM personnalisé public ou un attribut de classe ou un attribut d'attribut pour nous, et ce n'est pas seulement cela, vous pouvez également manipuler la portée, la liaison des événements, les styles de modification, etc. sur sa base. Grâce à cette directive, nous pouvons encapsuler de nombreuses instructions publiques, telles que les instructions de pagination, les instructions d'achèvement automatique, etc. Ensuite, vous n'avez qu'à écrire une seule ligne de code dans la page HTML pour atteindre de nombreuses fonctions puissantes. D'une manière générale, la directive doit être utilisée pour avoir les scénarios suivants:
1. Rendez votre HTML plus sémantique et vous n'avez pas besoin d'étudier le code et la logique en profondeur pour connaître la logique générale de la page.
2. Résumé un composant personnalisé et réutilisez-le ailleurs.
1. La définition de la directive et sa méthode d'utilisation
La définition de la directive AngularJS est à peu près la suivante
angular.module ("app", []). Directive ("DiredivenName", function () {return {// définir en définissant les éléments};})La directive peut être placée dans les noms d'élément, les attributs, les classes et les commentaires. Ce qui suit est le moyen équivalent de citer MyDir, la directive. (Mais de nombreuses directives sont limitées à l'utilisation des "propriétés")
<span <span style = "font-Family: Arial, Helvetica, Sans-Serif;"> Directive-Name </span> <span style = "font-Family: Arial, Helvetica, Sans-Serif;"> = "exp"> </span> // Properties </span> <span style = "Font-Family: Arial, Helvetica, SANS-SERIF; "> Directive-Name </span >> </ <span style =" font-Family: Arial, Helvetica, Sans-Serif; "> Directive-Name </span >> </ <span style =" Font-Family: Arial, Helvetica, Sans-Serif; "> Directive </span >> </ <Span Style =" FONT-FAMILY: ARIAL, HELVAA, SANS-SERIF; "> Directive-Name </span>> // Element <! - Directive: <Span Style =" font-Family: Arial, Helvetica, Sans-Serif; "> Directive-Name </span> <span style =" Font-Family: Arial, Helvetica, Sans-Serif; "> Exp -> // Remarques </span>
L'exemple suivant:
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <éread> <meta charset = "utf-8"> <itle> introduction à angularjs </ title> <script type = "text / javascrip <Hello-World> </ Hello-World> </ Body> <Script Type = "Text / JavaScript"> var app = angular.module ('myApp', []); app.directive ('helloworld', function () {return {restrict: 'e', modèle: '<div> salut je suis lin bingwen ~~~ </div>', remplacer: true};}); </cript> </html>résultat:
Vous trouverez ci-dessous une version détaillée de directive
var mymodule = angular.module (...); Mymodule.Directive ('DiredivenName', fonction Factory (injectables) {var directiveFinIitionObject = {priority: 0, modèle: '<div> </div>', templateUrl: 'directive.html', remplacer: false, transclude: false, restrict: 'a', scope: false: function compil PreLlink (Scope, ielement, iantrs, contrôleur) {...}, post: fonction postLink (scope, ielement, iantrs, contrôleur) {...}}}, lien: fonction postLink (scope, ielement, iattrs) {...}};2. Interprétation du contenu de commande directive
Vous pouvez voir qu'il a 8 contenus
1
(String) Les paramètres facultatifs indiquent la forme de l'instruction déclarée dans le DOM; Les valeurs sont: e (élément), A (attribut), c (classe), m (notation), et la valeur par défaut est a; Bien sûr, deux peuvent également être utilisés ensemble, comme EA. La représentation peut être un élément ou un attribut.
[HTML] Afficher les fragments de code de vue de copie ordinaire sur le code dérivé de mon fragment de code
E (élément): <diredivenName> </ DirectivenName>
A (propriété): <div diredivenName = 'expression'> </div>
C (classe): <div class = 'dirediseName'> </div>
M (note): <- Directive: DirectivenName Expression ->
D'une manière générale, E / A / C est utilisé plus fréquemment.
2. priorité
(Numéro), paramètres facultatifs, spécifiez la priorité de l'instruction. S'il y a plusieurs instructions sur un seul DOM, la priorité plus élevée sera exécutée en premier;
3. terminal
(Booléen), paramètre facultatif, peut être défini sur true ou false. S'il est défini sur true, d'autres instructions avec une priorité inférieure à cette instruction seront invalides et ne seront pas appelées (celle avec la même priorité sera toujours exécutée)
4.Template (chaîne ou fonction) Paramètres facultatifs, qui peuvent être:
(1) un morceau de texte HTML
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <éread> <meta charset = "utf-8"> <itle> introduction à angularjs </ title> <script type = "text / javascrip <Hello-World> </ Hello-World> </ Body> <Script Type = "Text / JavaScript"> var app = angular.module ('myApp', []); app.directive ('helloworld', function () {return {restrict: 'e', modèle: '<div> <h1> Salut je suis lin bingwen ~~~ </h1> </div>', remplacer: true};}); </cript> </html>(2) une fonction peut accepter deux paramètres Temenment et TATTRS
Lorsque la télémenture fait référence à l'élément qui utilise cette directive, et TATTRS est l'attribut de l'instance, qui est une collection (objet) composée de tous les attributs de l'élément, tels que:
<Hello-World2 title = 'Je suis la deuxième directive'> </ Hello-World2>
Le titre est l'attribut sur les tatouages
Voyons ce qui se passe lorsque le modèle est une fonction
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <éread> <meta charset = "utf-8"> <itle> introduction à angularjs </ title> <script type = "text / javascrip <Hello-World> </ Hello-World> <Hello-World2 Title = 'Je suis la deuxième directive'> </ Hello-World2> </ Body> <Script Type = "Text / JavaScript"> var App = Angular.Module ('MyApp', []); app.directive ('helloworld', function () {return {restrict: 'e', modèle: '<div> <h1> Salut je suis lin bingwen ~~~ </h1> </div>', remplacer: true};}); app.directive ("helloworld2", function () {return {restrict: 'eac', template: function (tement, tattrs) {var _html = ''; _html + = '<div>' + 'hello' + tattr.title + '</v>'; return _html;}};});); </cript> </html>résultat:
Vous pouvez voir que le champ de titre de la balise dans Hello-World2 est également utilisé dans la directive.
5.TemplateUrl (chaîne ou fonction), paramètre facultatif, peut être
(1) une chaîne représentant le chemin du fichier HTML
(2) Une fonction peut accepter deux paramètres Temenment et TATTRS (à peu près le même que ci-dessus)
Remarque: Pendant le développement local, vous devez exécuter un serveur, sinon l'utilisation de TemplateUrl entraînera une erreur de script de demande d'origine croisée (COR). Étant donné que le chargement des modèles HTML est chargé de manière asynchrone, le chargement d'un grand nombre de modèles ralentira le site Web. Voici une astuce, qui est d'abord de mettre en cache le modèle
Vous pouvez charger votre page d'index et inclure le code suivant dans le cadre de votre page.
<script type = 'text / ng-timplate' id = 'hello.html'> <div> <h1> Salut je suis lin bingwen ~~~ </h1> </div> </cript>
L'attribut ID ici est défini sur TemplateUrl.
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <éread> <meta charset = "utf-8"> <itle> introduction à angularjs </ title> <script type = "text / javascrip <Hello-World> </ Hello-World> </ Body> <Script Type = "Text / JavaScript"> var app = angular.module ('myApp', []); app.directive ('helloworld', function () {return {restrict: 'e', templateUrl: 'hello.html', remplacer: true};}); </ script> <script type = 'text / ng-timplate' id = 'hello.html'> <div> <h1> salut je suis lin bingwen ~~~ </h1> </div> </ script> </html>Résultat de sortie:
Une autre façon de se cacher est:
app.run (["$ templateCache", fonction ($ templateCache) {$ templatecache.put ("Bonjour.html", "<div> <h1> Salut je suis lin bingwen ~~~ </h1> </div>");}]);Des exemples d'utilisation sont les suivants:
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <éread> <meta charset = "utf-8"> <itle> introduction à angularjs </ title> <script type = "text / javascrip <Hello-World> </ Hello-World> </ Body> <Script Type = "Text / JavaScript"> var app = angular.module ('myApp', []); app.directive ('helloworld', function () {return {restrict: 'e', templateUrl: 'hello.html', remplacer: true};}); app.run (["$ templateCache", fonction ($ templateCache) {$ templatecache.put ("Bonjour.html", "<div> <h1> Salut je suis lin bingwen ~~~ </h1> </div>");}]); </cript> </html>résultat:
En fait, la première méthode est meilleure, il sera plus rapide d'écrire. L'auteur a le plus et la première méthode à écrire, qui est directement inclus dans SCPRIT.
6. Replace
(Valeur booléenne), la valeur par défaut est fausse. Lorsqu'il est défini sur true, jetons un coup d'œil à l'exemple suivant (comparez les exemples donnés dans le modèle)
Lorsque le remplacement est vrai, le tag bonjour-monde n'est plus là, sinon il existe.
7.Scope
(1) La valeur par défaut est fausse. Indique l'hérédité de la portée des parents;
(2) Vrai. Indique hériter de la portée des parents et créer votre propre portée (portée de l'enfant);
(3) {}. Indique la création d'une portée d'isolement complètement nouvelle;
7.1 Tout d'abord, comprenons le mécanisme d'héritage de la portée. Utilisons la commande ng-contrôleur comme exemple.
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <éread> <meta charset = "utf-8"> <itle> introduction à angularjs </ title> <script type = "text / javascript" src = "./ 1.5.3 / angular.min.js"> </cript> Ng-Controller = 'MainController'> Père: {{name}} <entrée ng-model = "name" /> <div my-directive> </div> </div> </ body> <script type = "text / javascript"> var app = angular.module ('myapp', []); app.Controller ('MainController', fonction ($ scope) {$ scope.name = 'lin bingwen';}); app.directive ('myDirective', function () {return {restrict: 'ea', scope: false, modèle: '<div> fils: {{name}} <entrée ng-model = "name" /> </ div>'};}); </cript> </html>Ensuite, nous utilisons un exemple simple et clair pour illustrer les différences de valeurs de portée:
Portée: faux
Portée: vraie
portée:{}
Lorsqu'il est faux, le fils hérite de la valeur du père et change la valeur du père, et la valeur du fils change également, et vice versa. (L'héritage n'est pas isolé)
Lorsqu'il est vrai, le fils hérite de la valeur du père et change la valeur du père. La valeur du fils change en conséquence, mais lorsque la valeur du fils change, la valeur du père reste inchangée. (Héritage et isolement)
Lorsque {}, la valeur du père n'est pas héritée, donc la valeur du fils est vide. La modification de la valeur de l'une ou l'autre des parties ne peut pas affecter la valeur de l'autre partie. (Pas d'héritage et d'isolement)
Astuce: l'isolement de la portée est un bon choix lorsque vous souhaitez créer un composant réutilisable. En isolant les portées, nous nous assurons que les directives sont «indépendantes» et peuvent être facilement insérées dans n'importe quelle application HTML, et cette approche empêche la portée des parents d'être contaminée;
7.2 Évacutes d'isolement Vous pouvez accéder aux propriétés de la portée des parents grâce à des politiques contraignantes.
La directive fournit trois façons d'interagir avec des endroits en dehors de l'isolement lors de l'utilisation de la portée de l'isolement. Ces trois sont
@ Lier un attribut de portée local à la valeur de propriété du nœud DOM actuel. Le résultat est toujours une chaîne, car l'attribut DOM est une chaîne.
& Fournit un moyen d'exécuter une expression dans le contexte de la portée des parents. Si le nom de l'attribue n'est pas spécifié, le nom d'attribut est le même nom local.
= Créez une liaison bidirectionnelle entre l'attribut de gamme locale et le nom d'attribut de portée parent via la valeur de l'attribut d'attribue de directive.
@ Attribut de portée locale
@ Méthode Les attributs locaux sont utilisés pour accéder aux valeurs de chaîne définies par l'environnement externe directif, liant principalement les valeurs de chaîne externes via l'attribut de balise où se trouve la directive. Cette liaison est unidirectionnelle, c'est-à-dire les changements de liaison de la portée des parents. Les propriétés de la portée dans la directive changeront de manière synchrone, tandis que les changements de liaison dans la portée sont isolés, et la portée du parent n'est pas connue.
L'exemple suivant: Directive déclare que le type de portée n'est pas isolé et utilise l'attribut de nom @ liant et utilise l'attribut de nom pour lier l'attribut dans la portée parent dans la directive. Lors de la modification de la valeur de l'attribut dans la portée des parents, la directive mettra à jour la valeur de manière synchrone. Lors de la modification de la valeur de la propriété de la valeur de propriété de la portée de la portée de la directive, la portée des parents ne peut pas mettre à jour la valeur de manière synchrone.
Code js:
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <éread> <meta charset = "utf-8"> <itle> introduction à angularjs </ title> <script type = "text / javascript" src = "./ 1.5.3 / angular.min.js"> </cript> Ng-Controller = "MyController"> <div> <div> Scope du parent: <div> Say: {{name}} <br> Modifiez le nom de la portée du parent: <entrée type = "Text" Value = "" ng-model = "name" /> </ div> </ div> <div> Scope isolée (n'utilisant pas la portée du parent {{name}}): <div isolement-directive name = "name"> </div> </div> </div> </ body> <script type = "text / javascript"> var app = angular.module ('myApp', []); App.Controller ("MyController", fonction ($ Scope) {$ scope.name = "Hello World";}). Directive ("IsolyledDirective", Function () {return {Scope: {Name: "@"}, modèle: 'Say: {{nom}} <br> Changez le nom de la Scope isolé: <fort Type = "Butch" ng-model = "name"> '};}); </cript> </html>Résultats: l'effet initial de la page
Effet d'animation:
Vous pouvez voir que le contenu de la portée des parents a changé et que la portée de l'enfant a changé en même temps. Et le contenu de la sous -cope a changé. Cela n'affecte pas le contenu de la portée des parents!
= attribut local de portée
= Créez une liaison bidirectionnelle entre l'attribut de gamme locale et le nom d'attribut de portée parent via la valeur de l'attribut d'attribue de directive.
Ce qui signifie que lorsque vous voulez une propriété liée à double sens, vous pouvez utiliser = pour introduire des propriétés externes. Qu'il s'agisse de modifier la portée des parents ou d'isoler les propriétés dans la portée, la portée des parents et la portée d'isolement mettra à jour les valeurs de propriété en même temps car ce sont des relations liées à double sens.
Exemple de code:
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <éread> <meta charset = "utf-8"> <itle> introduction à angularjs </ title> <script type = "text / javascript" src = "./ 1.5.3 / angular.min.js"> </cript> ng-controller="myController"> <div>Parent scope: <div>Say: {{user.name}}<br>Change the name of the parent scope: <input type="text" value="" ng-model="userBase.name"/></div> </div> <div>isolated scope: <div isolated-directive user="userBase"></div> </div> </div> </ body> <script type = "text / javascript"> var app = angular.module ('myApp', []); app.Controller ("myController", fonction ($ scope) {$ scope.userBase = {name: 'Hello', id: 1};}). Directive ("isokedDirective", function () {return {scope: {user: "="}, template: 'Say: {user}} <br>. type = "ButtoM" value = "" ng-model = "user.name" /> '}}) </cript> </html>Effet:
Vous pouvez voir que le contenu de la portée des parents et de la portée de l'enfant est toujours le même!
& Attributs de portée locaux
La méthode fournit un moyen d'exécuter directement une expression dans le contexte de la portée des parents. Cette expression peut être une fonction.
Par exemple, lorsque vous écrivez une directive, lorsque l'utilisateur clique sur un bouton, la directive souhaite informer le contrôleur, le contrôleur ne peut pas savoir ce qui se passe dans la directive. Peut-être que vous pouvez le faire en utilisant l'événement Broadcast in Angular, mais vous devez ajouter une méthode d'écoute d'événements au contrôleur.
La meilleure façon est de permettre à la directive de passer une fonction dans une portée parentale. Lorsqu'il y a une action en directive qui doit être mise à jour dans la portée des parents, un morceau de code ou une fonction peut être exécuté dans le contexte de la portée des parents.
L'exemple suivant exécute la fonction de la portée parent dans la directive.
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <éread> <meta charset = "utf-8"> <itle> introduction à angularjs </ title> <script type = "text / javascript" src = "./ 1.5.3 / angular.min.js"> </cript> Ng-Controller = "MyController"> <div> Portée du parent: <div> Say: {{Value}} </div> </div> <div> Scope isolé: <div isoked-Directive Action = "Click ()"> </div> </div> </div> </ body> <script = "text / javascript"> var app = Angular.Module. app.Controller ("myController", fonction ($ scope) {$ scope.value = "Hello World"; $ scope.click = function () {$ scope.value = math.random ();};}). Value = "EXECUTER Méthode de définition de l'étendue des parents dans la directive" ng-Click = "Action ()" /> '}}) </cript> </html>Effet:
Il existe de nombreux contenus d'instructions, parlons de transclude, de compline, de lien et de contrôleur.
8. Transclure
Si vous ne souhaitez pas que le contenu à l'intérieur de la directive soit remplacé par le modèle, vous pouvez définir cette valeur sur true. Généralement, il doit être utilisé avec la directive NGTRANSCULD. Par exemple: modèle: "<div> Bonjour chaque <div ng-transclude> </div> </div>", pour le moment, le contenu à l'intérieur de l'instruction sera intégré dans le Ng-Transclude Div. C'est-à-dire qu'il devient <v> Bonjour chaque <div> c'est le contenu à l'intérieur de la commande </div> </div>. La valeur par défaut est fausse; Cette option de configuration nous permet d'extraire le contenu contenu dans l'élément directif, puis de le placer dans une position spécifique dans le modèle de directive. Lorsque vous activez Transclude, vous pouvez utiliser Ng-Transclude pour indiquer où placer le contenu traduit
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <éad> <meta charset = "utf-8"> <itle> Introduction à angularjs </ title> <script type = "text / javascript" src = "./ 1.5.3 / angular.min.js"> </cript> </cript> </cript> lien </li> <li> Deuxième lien </li> </ul> </div> </ body> <script type = "text / javascript"> var app = angular.module ('myApp', []); app.Directive ('Sidebox', function () {return {restrict: 'ea', scope: {title: '@'}, tradlate: true, modèle: '<div> / <div> / <h2> {{title}} </h2> / <span ng-transclude> / </pank> / </v> / </v>'};}); </cript> </html>résultat:
Lors de la transformation: Faux,
Si l'instruction utilise le paramètre transclude, le contrôleur ne peut pas surveiller normalement les modifications du modèle de données. Il est recommandé d'utiliser le service de montre $ dans la fonction de liaison.
9.
Il peut s'agir d'une chaîne ou d'une fonction.
S'il s'agit d'une chaîne, utilisez la chaîne comme nom du contrôleur pour trouver le constructeur du contrôleur enregistré dans l'application.
angular.module ('myapp', []) .directive ('mydirective', function () {restrict: 'a', // contrôleur: 'SomeController'}) // autres endroits de l'application peuvent être le même fichier ou un autre fichier contenu dans index.html angular.module ('Myapp'). $ attrs, $ transclude) {// La logique du contrôleur est placée ici}); Il peut également être défini comme des fonctions anonymes directement à l'intérieur de l'instruction, et nous pouvons injecter n'importe quel service ici ($ log, $ timeout, etc.) [html] Afficher la copie ordinaire Afficher la tranche de code sur le code dérivé de mon code Slice Angular.Module ('MyApp', []) .Directive ('myDirective', Function () {restrict: 'a', contrôleur: fonction ($ SCOPE, $ ATTRIS, ' $ transclude) {// La logique du contrôleur est placée ici}});Il existe également des services spéciaux (paramètres) qui peuvent être injectés
(1) $ Portée, portée associée aux éléments directifs
(2) Elément $, l'élément correspondant à l'instruction actuelle
(3) $ attrs, un objet composé d'attributs de l'élément actuel
(4) $ transclude, fonction de liaison intégrée, fonctions réellement exécutées utilisées pour cloner les éléments et exploiter DOM
Remarque: à moins qu'il ne soit utilisé pour définir un comportement réutilisable, il n'est généralement pas recommandé ici.
Les fonctions de contrôleur et de liaison de l'instruction (à discuter plus loin) peuvent être échangées. La différence est que le contrôleur est principalement utilisé pour fournir un comportement qui peut être réutilisé entre les instructions, mais la fonction de liaison ne peut définir le comportement que dans les instructions internes actuelles et ne peut pas être réutilisée entre les instructions.
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <éread> <méta charset = "utf-8"> <itle> introduction à angularjs </ title> <script type = "text / javascrip Bingwen ~~~ </lolo> </body> <script type = "text / javascript"> var app = angular.module ('myApp', []); app.directive ('hello', function () {return {restrict: 'ea', transclude: true, // note qu'il doit être défini sur true contrôleur: fonction ($ scope, $ element, $ attrs, $ transclude, $ log) {// vous pouvez injecter le service que vous souhaitez injecter $ transclude (function (clone) {var a = angulaire. $ att.mycolor); </cript> </html>Résultat de sortie:
Et sortir bonjour à tous sous la console
Regardons $ transclude (); Ici, cela peut prendre deux paramètres, le premier est $ Scope, Scope, et le second est une fonction de rappel avec le clone de paramètre. Et ce clone est en fait le contenu intégré (enveloppé par jQuery), et vous pouvez y faire beaucoup d'opérations DOM.
Sa manière la plus simple est
<cript> angular.module ('myApp', []). Directive ('mysite', function () {return {restrict: 'ea', transclude: true, contrôleur: function ($ scope, $ élément, $ attrs, $ transclude, $ log) {var a = $ transclude (); // $ transclude () est le contenu emballé $. </cript>Remarque: l'utilisation de $ transclude générera une nouvelle portée.
Par défaut, si nous utilisons simplement et pratiquement $ transclude (), la portée par défaut est la portée générée par $ transclude
Mais si nous utilisons $ transclude ($ scope, fonction (clone) {}), alors la portée est la portée de la directive
Ensuite, la question revient. Et si nous voulons utiliser la portée des parents
$ Scope. $ le parent peut être utilisé
De même, si vous voulez une nouvelle portée, vous pouvez également utiliser $ scope. $ Parent.new ();
10.Controlleras
Cette option est utilisée pour définir l'alias de votre contrôleur
Dans le passé, nous avons souvent utilisé cette méthode pour écrire du code:
angular.module ("app", []) .Controller ("DemoController", ["$ scope", function ($ scope) {$ scope.title = "angualr";}]) <div ng-app = "app" ng-controller = "Demoontroller"> {{title}} </ div>Plus tard, AngularJS1.2 nous a apporté un nouveau sucre de syntaxe, afin que nous puissions l'écrire comme ça
angular.module ("app", []) .Controller ("DemoController", [function () {this.title = "angualr";}]) <div ng-app = "app" ng-contrôleur = "DemiController comme démo"> {{démo.Title}} </v>Nous pouvons également écrire ceci dans la commande
<Script> angular.module ('myApp', []). Directive ('mysite', function () {return {restrict: 'ea', transclude: true, contrôleur: 'SomeController', Controlleras: 'MainController' //..other Configuration};}); </cript>11.Require (chaîne ou tableau)
Une chaîne représente le nom d'une autre instruction, qui sera utilisée comme quatrième paramètre de la fonction de liaison. Nous pouvons donner un exemple pour illustrer l'utilisation spécifique. Supposons que nous devons rédiger deux instructions maintenant. Il existe de nombreuses méthodes qui se chevauchent dans la fonction de liaison de liaison (la fonction de liaison sera discutée plus loin). Pour le moment, nous pouvons écrire ces méthodes répétées dans le contrôleur de la troisième instruction (le contrôleur est également mentionné ci-dessus pour fournir le comportement de réutilisation entre les instructions). Ensuite, dans ces deux instructions, nécessitez l'instruction avec le champ de contrôleur (la troisième instruction).
Enfin, vous pouvez vous référer à ces méthodes de chevauchement via le quatrième paramètre de la fonction de liaison de liaison.
<! doctype html> <html ng-app = "myapp"> <éad> <script src = "http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"> </ script> </direc <inner-Directive2> </ Inner-Directive2> </UTER-Directive> <Script> var app = angular.module ('myApp', []); app.directive ('extérieure', function () {return {scope: {}, restrect: 'ae', contrôleur: function ($ scope) {this.say = function (somedirective) {console.log ('got:' + Somedirective.Message);};}}};}); app.directive ('innerdirective', function () {return {scope: {}, restrect: 'ae', require: '^ exterdirective', link: function (scope, elem, attrs, Controlerinstance) {scope.message = "hi, leifeng"; Controlerinstance.say (scope);}};}); app.directive ('innerdirective2', function () {return {scope: {}, restrict: 'ae', require: '^ exterdirective', link: function (scope, elem, attrs, contrôleringance) {scope.message = "hi, shushu"; Controleringance.Say (scope);}};}); </cript> </ body> </html>Les instructions innerdirective et directive innerdirective2 dans l'exemple ci-dessus des méthodes de réutilisation définies dans le contrôleur de la directive extérieure.
Il est en outre expliqué que le contrôleur de l'instruction est utilisé pour communiquer entre différentes instructions.
De plus, nous pouvons ajouter un préfixe à la valeur du paramètre de l'exigence, ce qui modifiera le comportement du contrôleur de recherche:
(1) Sans préfixe, l'instruction sera recherchée dans le contrôleur fourni par lui-même. Si aucun contrôleur n'est trouvé, une erreur sera lancée.
(2)? Si le contrôleur requis n'est pas trouvé dans l'instruction actuelle, NULL sera transmis au quatrième paramètre de la fonction de connexion de liaison
(3) ^ Si le contrôleur requis n'est pas trouvé dans l'instruction actuelle, le contrôleur de l'élément parent sera trouvé
(4)? ^ Combinaison
12. processus de compilation d'instructions d'Anguar
Chargez d'abord la bibliothèque AngularJS et trouvez la directive NG-App pour trouver les limites de l'application.
Appelez le service de compilation $ compilé pour la compilation en fonction de la portée définie par NG-App. AngularJS traversera l'ensemble du document HTML et traitera les instructions déclarées sur la page en fonction de la priorité des instructions en fonction des instructions. Le DOM est converti en fonction des paramètres de configuration (modèle, place, transclude, etc.) dans les instructions, puis commencez à exécuter la fonction de compilation de chaque instruction dans l'ordre (si la fonction de compilation est définie sur l'instruction) pour convertir le modèle lui-même.
Remarque: La fonction de compilation ici est configurée dans notre directive, qui est différente du service de compilation $ mentionné ci-dessus. Une fois chaque fonction de compilation exécutée, une fonction de liaison sera renvoyée et toutes les fonctions de liaison seront combinées dans une grande fonction de liaison.
Ensuite, cette grande fonction de liaison sera exécutée, principalement pour la liaison des données, en modifiant dynamiquement les données dans la portée en enregistrant un écouteur sur le DOM, ou en utilisant $ watchs pour écouter les variables dans la portée pour modifier le DOM, établissant ainsi la liaison bidirectionnelle, etc. Si la fonction de compilation n'est pas configurée dans nos instructions, la fonction de liaison que nous avons configurée sera exécutée. Ce qu'elle fait est à peu près la même que la grande fonction de liaison synthétisée par toutes les fonctions de liaison après le retour de la compilation ci-dessus.
Par conséquent: dans la directive, les options de compilation et de liaison s'excluent mutuellement. Si ces deux options sont définies en même temps, la fonction renvoyée par Compile sera considérée comme une fonction de liaison et l'option de liaison elle-même sera ignorée.
13. Fonction de compilation
Fonction Compile (Tement, Tattrs, transclude) {...}
Les fonctions de compilation sont utilisées pour gérer les situations où le modèle DOM doit être modifié. Étant donné que la plupart des instructions ne nécessitent pas de modification du modèle, cette fonction n'est pas couramment utilisée. Les exemples qui doivent être utilisés incluent NGtrePeat, qui nécessite la modification du modèle, et NgView nécessite le chargement de contenu de manière asynchrone. La fonction compilée accepte les paramètres suivants.
Tément - élément de modèle - l'élément dans lequel réside la directive. Il est sûr de déformer cet élément et ses sous-éléments.
TATTRS - Attributs de modèle - Tous les attributs déclarés par la directive sur cet élément sont partagés dans la fonction compilée.
Transclude - une fonction de fonction de liaison intégrée (portée, ClonelingFn).
Remarque: n'effectuez aucune opération autre que la déformation DOM dans la fonction compilée. Plus important encore, l'enregistrement des événements d'écoute DOM doit être effectué dans la fonction liée, et non dans la fonction compilée.
Une fonction compilée peut renvoyer un objet ou une fonction.
Fonction de retour - Équivalent à une fonction de liaison enregistrée à l'aide de l'attribut de liaison de l'objet de configuration lorsque la fonction compilée n'existe pas.
Return Object - Renvoie un objet qui a enregistré une fonction via l'attribut pré ou post. Reportez-vous à l'explication des fonctions de pré-lien et de post-liking ci-dessous.
14. Fonction de liaison
Lien de fonction (Scope, Ielement, Iattrs, Controller) {...}
La fonction de liaison est responsable de l'enregistrement des événements DOM et de la mise à jour du DOM. Il est exécuté après que le modèle est cloné, et c'est également là que la plupart des code de logique d'instructions sont écrits.
Portée - La portée que les directives doivent écouter.
IEMENT - Élément d'instance - L'élément où réside la directive. Il est sûr d'opérer sur des éléments enfants d'éléments dans la fonction PostLink, car alors ils sont tous liés.
IITTRS - Attributs d'instance - Attributs d'instance, une liste standardisée des attributs déclarés sur l'élément actuel, qui sont partagés entre toutes les fonctions liées.
Contrôleur - Instance de contrôleur, c'est-à-dire le contrôleur à l'intérieur Direct2 demandé par l'instruction actuelle. Par exemple: Controller: function () {this.addStronglengle = function () {}} Dans la directive directe2, puis, dans la fonction de liaison de la directive actuelle, vous pouvez l'appeler via Controller.AddStrength.
La fonction de pré-alimentation s'exécute avant que les éléments enfants ne soient liés. Il ne peut pas être utilisé pour déformer DOM dans le cas où la fonction de liaison ne peut pas trouver l'élément correct à lier.
Fonction post-liaison Tous les éléments sont exécutés après avoir été lié.
illustrer:
L'option de compilation elle-même n'est pas utilisée fréquemment, mais la fonction de liaison est utilisée fréquemment. Essentiellement, lorsque nous définissons l'option de lien, nous créons en fait une fonction de liaison postLink () afin que la fonction compile () puisse définir la fonction de liaison. Généralement, si la fonction de compilation est définie, cela signifie que nous voulons effectuer des opérations DOM avant que les instructions et les données en temps réel ne soient placées dans le DOM. Il est sûr d'effectuer des opérations DOM telles que l'ajout et la suppression des nœuds dans cette fonction. Les options de compilation et de liaison s'excluent mutuellement. Si ces deux options sont définies en même temps, la fonction renvoyée par Compile sera considérée comme une fonction de liaison et l'option de liaison elle-même sera ignorée. La fonction de traduction est responsable de la conversion du modèle DOM. La fonction de liaison est responsable de la liaison de la portée et du DOM. Le DOM peut être utilisé manuellement avant que la portée ne soit liée au DOM. En pratique, ce type d'opération est très rare lors de la rédaction d'instructions personnalisées, mais il existe plusieurs instructions intégrées qui fournissent de telles fonctionnalités. La fonction de liaison est facultative. Si une fonction compilée est définie, il renvoie la fonction liée, donc lorsque les deux fonctions sont définies, la fonction compilée surcharge la fonction liée. Si nos instructions sont simples et ne nécessitent pas de paramètres supplémentaires, nous pouvons renvoyer une fonction de la fonction d'usine (fonction de rappel) pour remplacer l'objet. Si cela est fait, cette fonction est la fonction de liaison.
Cet article est reproduit http://blog.csdn.net/evankaka
Ce qui précède est l'intégralité du contenu de l'utilisation d'AngularJS: Instruction directive, j'espère que cela sera utile à l'apprentissage de chacun.