Pour les instructions, ils peuvent être simplement compris comme des fonctions qui s'exécutent sur des éléments DOM spécifiques, et les instructions peuvent étendre les fonctions de cet élément.
Tout d'abord, jetons un coup d'œil à un exemple de paramètre complet, puis introduisons les fonctions et les usages de chaque paramètre en détail:
angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: function(tElement, tAttrs) {...}, templateUrl: String, replace: Boolean or String, scope: Boolean or Object, transclude: Boolean, controller: String or fonction (scope, élément, attrs, transclude, autresInjectables) {...}, contrôleras: chaîne, requise: string, lien: function (scope, ielement, iantrrs) {...}, compile: // return un objet ou connexion fonction, comme illustré ci-dessous: fonction (telement, tattrs, transclude) {return {pre: function (scope, ielement, iaTrs POST: fonction (scope, ielement, iantrs, contrôleur) {...}} return function postLink (...) {...}}};});restreindre [String]
Le restriction est un paramètre facultatif. Utilisé pour spécifier sous la forme de l'instruction déclarée dans le DOM. La valeur par défaut est A, c'est-à-dire qu'elle est déclarée sous la forme d'un attribut.
Les valeurs facultatives sont les suivantes:
E (élément)
<y-directive> </y-directive>
A (propriété, valeur par défaut)
<div my-directive = "expression"> </div>
C (nom de classe)
<div> </div>
M (note)
<- Directive: My-Directive Expression ->
Généralement, compte tenu de la compatibilité du navigateur, il est fortement recommandé que les attributs par défaut soient déclarés immédiatement sous forme d'attributs. La dernière méthode est recommandée de ne pas utiliser l'indice de qualification lorsqu'il n'est pas requis.
Code:
angular.module ('app', []) .directive ('myDirective', function () {return {restrict: 'e', modèle: '<a href = "http://www.baidu.com"> baidu </a>'};}) htmlcode: <my-directive> </adirective>Effet:
priorité [int]
La plupart des instructions ignorent ce paramètre et utilisent la valeur par défaut 0, mais certains scénarios sont très importants ou même nécessaires pour définir une priorité élevée. Par exemple, NGrepeat définit ce paramètre à 1000, afin qu'il puisse garantir que sur le même élément, il est toujours appelé avant d'autres instructions.
Terminal [bool]
Ce paramètre est utilisé pour arrêter d'exécuter des instructions sur l'élément actuel qui ont une priorité inférieure à cette instruction. Cependant, les instructions avec la même priorité que l'instruction actuelle seront toujours exécutées.
Par exemple: NGIF a une priorité légèrement supérieure à NgView (ce sont en fait des paramètres terminaux). Si la valeur d'expression de NGIF est vraie, NgView peut être exécuté normalement, mais si la valeur de l'expression NGIF est fausse, NGView ne sera pas exécuté car la priorité de NGView est faible.
modèle [chaîne ou fonction]
Le paramètre de modèle est facultatif et doit être défini sur l'une des deux formulaires suivants:
Un morceau de texte HTML;
Une fonction qui peut accepter deux paramètres, les paramètres sont TEMENTS et TATTRS et renvoie une chaîne représentant le modèle. T dans Temenment et TATTRS représente le modèle, par rapport à l'instance.
Tout d'abord, démontons la deuxième utilisation:
angular.module ('app', []) .directive ('mydirective', function () {return {restrict: 'eac', modèle: fonction (elem, att) {return "<a href = '" + att.value + "'>" + att.text + "</a>";}};})Htmlcode: (l'effet est le même que ci-dessus, aucune démonstration ne sera faite)
<my-directive value = "http://www.baidu.com" text = "baidu"> </ my-directive> <div my-directive value = "http://www.baidu.com" text = "baidu"> </ div>
templateUrl [chaîne ou fonction]
TemplateUrl est un paramètre facultatif, qui peut être du type suivant:
Une chaîne représentant le chemin d'accès d'un fichier HTML externe;
Une fonction qui peut accepter deux paramètres, les paramètres sont TEMENTS et TATTRS et renvoie une chaîne avec le chemin du chemin du fichier HTML externe.
Quoi qu'il en soit, l'URL du modèle sera passé par la couche de sécurité intégrée de NG, en particulier $ getTrustEdResourceUrl, qui protège le modèle contre les sources non fiables. Par défaut, lors de l'appel de la directive, le fichier de modèle HTML sera demandé via AJAX en arrière-plan. Le chargement d'un grand nombre de modèles ralentira gravement une demande client. Pour éviter la latence, les modèles HTML peuvent être mis en cache avant de déployer l'application.
Code:
angular.module ('app', []) .directive ('myDirective', function () {return {restrict: 'aec', templateUrl: function (elem, att) {return att.value + ".html"; // bien sûr ici, nous pouvons dire directement le chemin, et nous pouvons inclure des expressions dans le template}};}))remplacer [bool]
Le remplacement est un paramètre facultatif. Si ce paramètre est défini, la valeur doit être vraie car la valeur par défaut est fausse. La valeur par défaut signifie que le modèle sera inséré dans l'élément qui appelle cette directive en tant qu'élément enfant.
Par exemple, sous la valeur par défaut de l'exemple ci-dessus, le code HTML généré est le suivant:
<my-directive value = "http://www.baidu.com" text = "baidu"> <a href = "http://www.baidu.com"> baidu </a> </ my-directive>
Si remplacer = true est défini
<a href = "http://www.baidu.com" value = "http://www.baidu.com" text = "baidu"> baidu </a>
Selon mon observation, cet effet ne montrera un effet réel que lorsque restreint = "e".
Après avoir introduit les paramètres d'instruction de base, des paramètres de portée plus importants sont impliqués ...
Paramètre de portée [bool ou objet]
Le paramètre de portée est facultatif et peut être défini sur true ou un objet. La valeur par défaut est fausse.
Si plusieurs directives sur un élément utilisent la portée de l'isolement, une seule d'entre elles peut prendre effet. Seul l'élément racine dans le modèle de directif peut obtenir une nouvelle portée. Par conséquent, Scope est défini sur True par défaut pour ces objets. La fonction de la directive intégrée NG-contrôleur est d'hériter de la portée des parents et de créer une nouvelle portée enfant. Il crée une nouvelle portée d'enfant héritée de la portée des parents. L'héritage ici ne sera pas décrit en détail, et il est fondamentalement le même que l'héritage dans les objets.
Tout d'abord, analysons un morceau de code:
<div ng-app = "app" ng-init = "name = 'grand-père'"> <div ng-init = "name = 'père'"> Première génération: {{name}} <div ng-init = "name = 'Son'" ng-controller = "SomeController"> deuxième génération: {{name}} <div ng-init = "name = ' nom}} </div> </div> </div> </div> </div> </div>Nous avons constaté que la première génération, nous initialisons le nom en tant que père, mais la deuxième génération et la troisième génération sont en fait la même portée, donc leur nom est en fait un objet, donc l'effet de cela est le suivant:
Première génération: père
Deuxième génération: petit-fils
Troisième génération: petit-fils
Nous modifions le code pour isoler la troisième génération, puis vérifions l'effet:
<div ng-app = "app" ng-init = "name = 'Grandfather'"> <div ng-init = "name = 'père'"> première génération: {{name}} <div ng-init = "name = 'Son'" ng-controller = "SomeController"> Second Generation: {{name}} <div ng-init = "name = '" "" "" ng-controller = "secondController"> troisième génération: {{name}} </div> </div> </div> </div> </div> </div> angular.module ('app', []) .Controller ('SomeController', fonction ($ scope) {}) .Controller ('SecondController', fonction ($ scope) {})Les effets sont les suivants:
Première génération: père
Deuxième génération: fils
Troisième génération: petit-fils
Après avoir modifié le code, jetons un coup d'œil à l'héritage:
<div ng-app = "app" ng-init = "name = 'Grandfather'"> <div> Première génération: {{name}} <div ng-controller = "SomeController"> deuxième génération: {{name}} <div ng-controller = "SecondController"> troisième génération: {{nom}} </ div> </div> </div>Les effets sont les suivants:
La première génération: le baiser du grand-père
La deuxième génération: le baiser du grand-père
La troisième génération: le baiser du grand-père
Si vous souhaitez créer une directive qui peut hériter de la portée à partir d'un prototype externe et définir la propriété de la portée sur true, c'est simplement une isolation héréditaire, c'est-à-dire qu'elle ne peut pas affecter de manière réverse la portée du parent.
Jetons un coup d'œil à un autre exemple:
angular.module ('myApp', []) .Controller ('MainController', fonction ($ scope) {}) .directive ('mydirective', function () {return {restrict: 'a', scope: false, // basculer à {}, vrai test prioritaire: 100, template: '<div> interne: {} ng-model = "myProperty" /> </ div> '};Code html:
<div ng-controller = 'MainController' ng-Init = "MyProperty = 'Hello World!'"> External: {{myProperty}} <entrée ng-model = "MyProperty" /> <div my-directive> </ div> </div>Lorsque nous modifierons la valeur de la portée que nous trouverons
Faux: hériter mais pas isoler
vrai: hériter et isoler
{}: Isolé et non hérité
se transformer
Transclude est un paramètre facultatif. La valeur par défaut est fausse. L'intégration est souvent utilisée pour créer des composants réutilisables, un exemple typique est une boîte de dialogue modale ou une barre de navigation. Nous pouvons passer tout le modèle entier, y compris les instructions, en une seule instruction en l'intégrant. L'intérieur de la directive peut accéder à la portée de la directive externe, et le modèle peut également accéder aux objets de portée externe. Afin de passer la portée, la valeur du paramètre de portée doit être définie pour isoler la portée par {} ou true. Si le paramètre de portée n'est pas défini, la portée à l'intérieur de la directive sera définie sur la portée du modèle entrant.
Utilisez Transclude: Vrai uniquement si vous souhaitez créer une directive qui peut contenir n'importe quel contenu.
Regardons deux exemples - Bar de navigation:
<div Side-Box> <div> <a href = ""> Graphics </a> <a href = ""> ng </a> <a href = ""> d3 </a> <a href = ""> front-end </a> <a href = ""> startup </a> </v> </v>
Jscode:
angular.module ('myApp', []) .Directive ('Sidebox', function () {return {restrict: 'ea', scope: {title: '@'}, tradlate: true, template: '<iv> <h2>' + '{{title}} </h2> <scrus-transclude> </pande>Ce code indique au compilateur NG de mettre ce qu'il obtient de l'élément DOM où il découvre la directive NG-Transclude.
Voyons un exemple du site officiel:
angular.module ('docsisofnbindexample', []) .Controller ('Controller', ['$ scope', '$ timeout', function ($ scope, $ timeout) {$ scope.name = 'tobias'; $ scope.hidedialog = function () {$ scope.dialogidden = true; $ timeout (function () {$ scope.dialogidden = true; $ timeout (function () {$ scope.DialogishDendden = true; $ timeout (function () {$ Scope.Dialogidden = TRUE; $ Timeout (fonction () {$ Scope.DialogishDendDen = false;my-dialog-close.html
my-dialog-close.html <div> <a href ng-click = "close ()"> × </a> <div ng-transclude> </div> </div>
index.html
<div ng-controller = "contrôleur"> <my-dialog ng-hide = "dialogishidden" on-close = "ididealog ()"> consulter le contenu, {{name}}! </my-dialog> </div>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.
contrôleur [chaîne ou fonction]
Le paramètre du contrôleur peut être une chaîne ou une fonction. Lorsqu'il est défini sur une chaîne, le constructeur du contrôleur enregistré dans l'application sera trouvé avec la valeur de la chaîne comme nom.
angular.module ('myapp', []) .directive ('mydirective', function () {restrict: 'a', contrôleur: 'SomeController'})Un contrôleur en ligne peut être défini via un constructeur anonyme à l'intérieur de l'instruction.
angular.module ('myapp', []) .directive ('mydirective', function () {restrict: 'a', contrôleur: fonction ($ scope, $ element, $ attrs, $ transclude) {// La logique de contrôleur est placée ici}});Nous pouvons injecter n'importe quel service NG qui peut être injecté dans le contrôleur et nous pouvons l'utiliser dans les instructions. Il existe également des services spéciaux dans le contrôleur qui peuvent être injectés dans les instructions. Ces services comprennent:
1. $ Scope
La portée actuelle associée à l'élément directif.
2. $ élément
L'élément correspondant à l'instruction actuelle.
3. $ Attrs
Un objet composé d'attributs de l'élément actuel.
<div id = "adiv" class = "box"> </ div> a l'objet d'attribut suivant: {id: "adiv", class: "box"}4. $ transclude
La fonction de liaison intégrée sera prébinée avec la portée d'intégration correspondante. La fonction de liaison transclude est une fonction qui est réellement exécutée pour cloner les éléments et exploiter le DOM.
angular.module ('myApp', []) .directive ('myLink', function () {return {restrict: 'ea', transclude: true, contrôleur: function ($ scope, $ élément, $ attrs, $ transclude) {$ transclude (function (clone) {var a = anngular.element ('<a>'); A.Text (clone.Text (); }) ;;html
<my-link value = "http://www.baidu.com"> baidu </ my-link>
<div my-link value = "http://www.google.com"> google </div>
Il est recommandé d'utiliser TranscludEFN uniquement dans les paramètres de compilation. La fonction de liaison peut isoler les instructions les unes des autres, tandis que le contrôleur définit le comportement réutilisable. Si nous voulons exposer l'API de l'instruction actuelle à d'autres instructions, nous pouvons utiliser le paramètre du contrôleur, sinon nous pouvons utiliser le lien pour construire la fonctionnalité de l'élément d'instruction actuel (c'est-à-dire les fonctions internes). Si nous utilisons Scope. $ Watch () ou voulons interagir avec les éléments DOM en temps réel, l'utilisation des liens sera un meilleur choix. Avec l'intégration, la portée reflétée par la portée du contrôleur peut être différente de ce à quoi nous nous attendions. Dans ce cas, l'objet Scope $ ne peut être garanti d'être mis à jour normalement. Lorsque vous souhaitez interagir avec la portée de l'écran actuel, vous pouvez utiliser le paramètre de portée transmis dans la fonction de liaison.
contrôleras [String]
Le paramètre Controlleras est utilisé pour définir l'alias du contrôleur afin que le contrôleur puisse être référencé dans la vue sans même injecter $ Scope.
<div ng-controller = "MainController en tant que main"> <input type = "text" ng-model = "main.name" /> <span> {{main.name}} </span> </div>Jscode:
angular.module ('myApp', []) .Controller ('MainController', function () {this.name = "halower";});L'alias du contrôleur permet le routage et les instructions de créer des contrôleurs anonymes. Cette capacité peut créer des objets dynamiques en contrôleurs, et l'objet est isolé et facile à tester.
requise [String ou String []]
exiger est une chaîne représentant le nom d'une autre instruction. exiger va injecter le contrôleur dans l'instruction qu'il spécifie et servir de quatrième paramètre de la fonction de liaison de l'instruction actuelle. La valeur d'un élément de chaîne ou de tableau est le nom d'instruction qui sera utilisé dans la portée de l'instruction actuelle. Dans tous les cas, le compilateur NG se référera au modèle de l'instruction actuelle lorsque vous recherchez un sous-contrôleur.
compiler 【objet ou fonction】
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. Normalement, 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 compilée 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.
lien
compiler: function (tele, tattrs, tradlatefn) {// todo: return function (scope, ele, attrs) {// function link};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.
ngmodel
Il fournit une API plus sous-jacente pour traiter les données du contrôleur. Cette API est utilisée pour gérer la liaison des données, la vérification, la mise à jour CSS et d'autres choses qui ne fonctionnent pas réellement le DOM. Le contrôleur NGModel sera injecté dans les instructions avec le NGMODEL, qui contient certaines méthodes. Afin d'accéder au NGMODELController, vous devez utiliser les paramètres de requise.
Les éléments courants utilisés par NGModelController sont les suivants:
1. Afin de définir la valeur de vue dans la portée, la fonction ngmodel. $ SetViewValue () doit être appelée.
La méthode $ setViewValue () convient à l'écoute des événements personnalisés dans des directives personnalisées (telles que l'utilisation d'un plugin jQuery avec des fonctions de rappel), et nous aimerions définir $ ViewValue et exécuter des boucles de digest lorsque le rappel est appelé.
angular.module ('myapp') .directive ('mydirective', function () {return {require: '? ngmodel', link: function (scope, ele, attrs, ngmodel) {if (! ngmodel) return; $ (function () {ele.datePicker ({// function function on selete SPOPE. $ applique () {ngModel. $ SetViewValue (Date);});}}); }}; }); }}; }); }; }); }; }); }; }); }; }); }; }); }; }); }; }); }; }); }; });2. La méthode de rendu $ peut définir la méthode de rendu spécifique de la vue
3. Propriétés
1 et 1 $ ViewValue
La propriété $ ViewValue contient la chaîne réelle requise pour mettre à jour la vue.
2. $ ModelValue
$ ModelValue est détenu par le modèle de données. $ ModelValue et $ ViewValue peuvent être différents selon que le pipeline Parser $ fonctionne dessus.
3. $ analyseurs
La valeur des analyseurs $ est un tableau de fonctions, où les fonctions sont appelées une par une sous la forme de pipelines. NgModel La valeur lue du DOM est transmise dans la fonction dans $ Parsers et est traitée par l'analyseur en séquence.
4. $ des formateurs
La valeur des formateurs $ est un tableau de fonctions qui sont appelées une par une sous la forme d'un pipeline lorsque la valeur du modèle de données change. Il n'a aucun effet sur le pipeline $ analyseur et est utilisé pour formater et convertir les valeurs pour afficher dans les contrôles avec cette valeur liée.
5. $ ViewChangeListeners
La valeur de $ ViewChangeListenners est un tableau de fonctions qui sont appelées une par une sous la forme d'un pipeline lorsque la valeur de la vue change. Avec $ ViewChangeListenners, un comportement similaire peut être réalisé sans utiliser $ watch. Étant donné que la valeur de retour est ignorée, ces fonctions n'ont pas besoin de valeurs de retour.
6. $ Erreur
L'objet $ Erreur contient le nom du validateur qui n'a pas réussi la vérification et les informations d'erreur correspondantes.
7. $ vierge
La valeur de $ vierge est booléenne, qui peut nous dire si l'utilisateur a modifié le contrôle.
8. $ sale
La valeur de $ sale est l'opposé de $ vierge, qui peut nous dire si l'utilisateur a interagi avec le contrôle.
9. $ valide
La valeur valide $ nous indique s'il y a des erreurs dans le contrôle actuel. La valeur est fausse lorsqu'il y a une erreur, et la valeur est vraie lorsqu'il n'y a pas d'erreur.
10. $ invalide
La valeur $ non valide nous indique s'il y a au moins une erreur dans le contrôle actuel, et sa valeur est l'opposé de $ valide.
Ce qui précède est la compilation des instructions et des documents de connaissances sur AngularJS. Nous continuerons de les ajouter plus tard. Merci pour votre soutien à ce site!