Angularのカスタムディレクティブの使い方

今回はAngularのカスタム命令の使い方と、Angularのカスタム命令を使用する際の注意点を紹介します。以下は実際的なケースです。

カスタマイズ指定

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

元のhtmlへの属性展開のカスタマイズ指定。

指定アプリケーション:

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

設定項目にtemplateUrl(scope:{footer:@footer})を記述できます(@footerの要素タグ内のfooterは属性であることに注意)、

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

に複数の単語を記述できますディレクティブ キャメルケースの名前付け ('myDir') を使用します。 html では大文字と小文字が区別されないため、my-dir を使用して html に命令を記述することができます。
-- templateUrl(scope:{footer:@footer}, replace:true) の replace: true は、カスタム指定されたタグを置き換えることができます。

指定されたクラスの形式:

ですが、デフォルトは A||E であるため、一致するパターン設定項目を追加する必要があります:
templateUrl(scope: {footer: @footer}、restrict:C) は正常に追加できます。 ------カテゴリ C------

マッチング モードは A、C、E、M の合計 4 つあります (コメント、あまり一般的ではありません)。デフォルトは A | E です。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

$watch、$apply、$digestのデータバインディングプロセスの詳細な説明

必須のJavaScriptの詳細な説明

jsの組み込みオブジェクトとは

以上がAngularのカスタムディレクティブの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。