So verwenden Sie die benutzerdefinierten Anweisungen von Angular

Dieses Mal zeige ich Ihnen, wie Sie die benutzerdefinierten Anweisungen von Angular verwenden Vorsichtsmaßnahmen Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Benutzerdefinierte Bezeichnung

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

Benutzerdefinierte Bezeichnung der Attributerweiterung zum ursprünglichen HTML.

Spezifizierte Anwendung:

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

Sie können templateUrl(scope:{footer:@footer}) in das Konfigurationselement schreiben (beachten Sie die Fußzeile im Element-Tag in @footer ein Attribut ist), verwenden mehrere Wörter in der

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 =
    }
    ...
  }
});

-Direktive die Kamel-Fall-Benennung („myDir“). Sie können my-dir verwenden, um Anweisungen in HTML zu schreiben, da bei HTML die Groß-/Kleinschreibung nicht beachtet wird.
-- replace: true in templateUrl(scope:{footer:@footer}, replace:true) kann das benutzerdefinierte angegebene Tag ersetzen.

Angegebene Klassenform:

, aber da der Standardwert A||E ist, muss ein passendes Modus-Konfigurationselement hinzugefügt werden:
templateUrl (scope:{footer:@footer}, strict:C) kann erfolgreich hinzugefügt werden. ------Kategorie C------

verfügt über insgesamt vier Übereinstimmungsmodi: A, C, E, M ( Anmerkung , weniger häufig verwendet), wenn Nicht das entsprechende Muster schreiben, der Standardwert ist A || Chinesische Website!

Empfohlene Lektüre:

Detaillierte Erläuterung des Datenbindungsprozesses von $watch, $apply und $digest

Detaillierte Erläuterung des unverzichtbares JavaScript-Paket

Was sind die integrierten Objekte von js

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die benutzerdefinierten Anweisungen von Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!