Comment utiliser les directives personnalisées d'Angular

Cette fois, je vais vous montrer comment utiliser les instructions personnalisées d'Angular. Quelles sont les précautions lors de l'utilisation des instructions personnalisées d'Angular. Ce qui suit est un cas pratique, jetons un coup d'œil.

Désignation personnalisée

angular.module(&#39;dir&#39;,[  ]).directive( &#39;mydir&#39; ,function(  ){   return {template:&#39;<div>hello</div>&#39;}} )

Désignation personnalisée de l'extension des attributs au code HTML d'origine.

Application spécifiée :

<div mydir> </div>写成自定义属性                      ----A----属性
-<mydir></mydir>写成元素。注意如果需要改变模板路径里面的内容，就需要使用ng-transclude,然后在模板指令的配置项里写
return {templateUrl :../template.html,transclued:true}          -----E----元素

Vous pouvez écrire templateUrl(scope:{footer:@footer}) dans l'élément de configuration (notez le pied de page dans la balise element dans @footer est un attribut), plusieurs mots dans la directive

Error: $compile:iscp

Invalid Isolate Scope Definition
Description
When declaring isolate scope the scope definition object must be in specific format which starts with mode character (@&=<), after which comes an optional ?, and it ends with an optional local name.
myModule.directive(&#39;directiveName&#39;, function factory() {  return {
    ...
    scope: {      &#39;localName&#39;: &#39;@&#39;, // OK
      &#39;localName2&#39;: &#39;&attr&#39;, // OK
      &#39;localName3&#39;: &#39;<?attr&#39;, // OK
      &#39;localName4&#39;: &#39; = attr&#39;, // OK
      &#39;localName5&#39;: &#39; =*attr&#39;, // OK      
      &#39;localName6&#39;: &#39;attr&#39;,    // ERROR: missing mode @&=<
      &#39;localName7&#39;: &#39;attr=&#39;,   // ERROR: must be prefixed with @&=<
      &#39;localName8&#39;: &#39;=attr?&#39;,  // ERROR: ? must come directly after the mode
      &#39;localName9&#39;: &#39;<*&#39;  // ERROR: * is only valid with =
    }
    ...
  }
});

utilisent une dénomination en casse chameau (« myDir »). Vous pouvez utiliser my-dir pour écrire des instructions en HTML, car HTML n'est pas sensible à la casse.
-- replace: true in templateUrl(scope:{footer:@footer}, replace:true) peut remplacer la balise personnalisée spécifiée.

Forme de classe spécifiée :

, mais comme la valeur par défaut est A||E, un élément de configuration du mode correspondant doit être ajouté :
templateUrl (scope:{footer:@footer}, restrict:C) peut être ajouté avec succès. ------Catégorie C------

a un total de quatre modes de correspondance : A, C, E, M ( commentaire , moins utilisé), sinon Écrivez le modèle correspondant, la valeur par défaut est A || E.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le chinois PHP. site web!

Lecture recommandée :

Explication détaillée du processus de liaison de données de $watch, $apply et $digest

Explication détaillée du package JavaScript incontournable

Quels sont les objets intégrés de js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!