Explication détaillée des propriétés des objets renvoyées par la directive AngularJS_AngularJS

Écrit devant : Puisque la partie directive est la priorité absolue dans angulairejs, elle sera expliquée dans plusieurs chapitres. Ce chapitre explique principalement les attributs les plus simples de l'objet renvoyé par la directive

Directive() est utilisée dans angulairejs pour définir des instructions. Cette méthode reçoit deux paramètres : name (le nom de l'instruction), factory_function (cette fonction définit tous les comportements de l'instruction et renvoie un objet)

Châtaigne :

//index.js
angular.module('myApp',[]);
myApp.directive('myDirective',function() {return {};});

L'objet renvoyé contient les propriétés et méthodes suivantes :

1 : restreindre : chaîne

Cet attribut est utilisé pour décrire la forme sous laquelle la directive myDirective est déclarée dans le DOM (c'est-à-dire là où elle doit être utilisée en HTML)
Les valeurs optionnelles de cet attribut sont : E (élément), A (attribut, valeur par défaut), C (nom de classe), M (commentaire), qui peuvent être utilisées seules ou en combinaison
J'ai vu un dicton : si vous souhaitez personnaliser une fonction de commande indépendante, c'est-à-dire que la commande peut effectuer une série d'opérations indépendamment sans s'appuyer sur d'autres éléments, attributs, etc., définissez la commande comme un élément si vous le souhaitez ; pour utiliser cette commande Pour étendre les fonctionnalités d'une directive existante, définissez-la comme attribut. Je ne sais pas si cette compréhension est raisonnable, mais c'est effectivement une bonne norme de méthode de sélection qui peut être utilisée comme référence

2 : priorité : Numéro

Cet attribut est utilisé pour définir la priorité de l'instruction (la valeur par défaut est 0, ngRepeat a la priorité la plus élevée parmi toutes les instructions intégrées, qui est 1000). Celle avec la priorité la plus élevée est exécutée en premier.

3 : terminal : booléen

Cet attribut est lié à l'attribut priorité. Il est utilisé pour déterminer s'il faut arrêter d'exécuter des instructions avec une priorité inférieure à cette instruction sur l'élément courant, mais la même priorité sera toujours exécutée
Châtaigne :

//index.js
angular.module('myApp',[])
.directive('myDirective',function() {
  return {
    restrict: 'AE',
    priority: 1,
    template: '<div>hello world</div>'
  };
})
.directive('myDirective1',function() {
  return {
    restrict: 'AE',
    priority: 3,
    terminal: true
  };
})

<!-- index.html -->
<div my-directive my-directive1></div>

Si la directive myDirective1 n'est pas définie, le navigateur affichera hello world, mais après avoir ajouté la directive myDirective1, défini sa priorité sur une priorité supérieure à myDirective et défini l'attribut du terminal sur true sur myDirective1, il s'arrêtera. Directive maDirective.

4 : modèle : Chaîne/Fonction

Cet attribut définit un modèle (c'est-à-dire que la partie utilisant cette instruction dans le fichier html remplacera le contenu du modèle, le modèle est donc principalement au format html)
Les attributs se présentent sous deux formes : un morceau de texte HTML et une fonction qui renvoie une chaîne de modèle, et la fonction reçoit deux paramètres : tElement, tAttrs

5 : templateUrl : Chaîne/Fonction

Lorsqu'il y a beaucoup de contenu de modèle, l'imbriquer directement dans le modèle apparaîtra redondant. Vous pouvez stocker le code du modèle dans un fichier séparé. Dans ce cas, vous devrez importer le fichier TemplateUrl. 🎜> Les attributs se présentent également sous deux formes : une chaîne représentant le chemin d'un fichier html externe, et une fonction qui renvoie une chaîne du chemin d'un fichier html externe. Cette fonction reçoit deux paramètres : tElement, tAttrs
.

6 : remplacer : booléen

La valeur par défaut de cet attribut est false, indiquant si le modèle sera inséré en tant qu'élément enfant dans l'élément qui appelle cette directive, ou écrasera et remplacera l'élément qui appelle cette directive.

Châtaigne :

//index.js
angular.module('myApp',[])
.directive('myDirective',function() {
  return {
    restrict: 'A',
    template: '<div>hello world</div>',
    replace: true/false
  };  
}) 

 <!-- index.html -->
<my-directive></my-directive>

Lorsque repalce est faux, le code source du navigateur est rendu comme b5164c6eb4c755b3ed092f376e3665a3dc6dce4a544fdca2df29d5ac0ea9906bhello world16b28748ea4df4d9c2150843fecfba68adbb35bdcb0fb2fe4e0d48096f28053d

Lorsque c'est vrai, il apparaîtra comme dc6dce4a544fdca2df29d5ac0ea9906bhello world16b28748ea4df4d9c2150843fecfba68

7 : transclure : booléen

Châtaigne :

<!-- index.html -->
<div my-directive>world</div>

Comme cet exemple, s'il y a du contenu à l'intérieur de l'instruction, généralement le modèle écrasera et remplacera directement le contenu, mais maintenant je veux le conserver, et c'est là que la transclusion est utile

//index.js
angular.module('myApp',[])
.dirctive('myDirective',function() {
  return {
    restrict: 'EA', 
    transclude: true,
    template: '<div>hello <span ng-transclude></span></div>'
  };
})

Le code js ci-dessus intégrera le monde contenu dans la directive du fichier html dans l'élément span du modèle. Notez que l'élément span ajoute l'attribut de directive intégré ng-transclude (c'est très important)

En bref, le but de cet attribut est de dire au compilateur angulairejs de placer le contenu qu'il obtient de l'élément DOM là où il trouve la directive ng-transclude.
Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.