ディレクティブの使用の柔軟性を高めるために、ディレクティブの「プリプロセッサ」を追加しました。 ディレクティブがDOMに「接続」されると呼び出されます。 拡張したり、独自のものに置き換えたりして、次のような機能を提供できます。
- 属性をディレクティブに追加する（テンプレート、templateUrl、スコープなど）
- ディレクティブを変換して置き換えます
- たとえば、ディレクティブの一部をスコープ内に格納するために、ディレクティブの場所を変更する（まあ、どうしたいのか）
次に例をいくつか示します。
属性「bold」をディレクティブに追加しますalight.directivePreprocessor.ext-プリプロセッサーから呼び出され、ハンドラーを挿入し、その中の
directive.bold属性を確認し、要素の内容を変更する「ハンドラー」の配列。
alight.directivePreprocessor.ext.splice(1, 0, { code: 'bold', // not necessary fn: function() { if(this.directive.bold) this.element.innerHTML = '<b>' + this.element.innerHTML + '</b>' } })
ディレクティブの例：
alight.directives.al.example = { bold: true }
プランカーの例遅延ディレクティブの有効化タスク：使用時に、対応するファイルから「dyn」プレフィックスを持つすべてのディレクティブをサーバーから自動的にダウンロードします。
dyn-directiveディレクティブとその接続の例：
<span dyn-directive="name"></span>
ディレクティブファイルは、ディレクティブ名
dyn.directive.jsでアップロードされます
alight.directives.dyn.directive = { template: '<b>{{title}}</b>', scope: true, link: function(element, name, scope) { scope.$watch(name, function(value) { scope.title = '+' + value + '+' }, { init:true }) } } // "" waitDirectives.directive.resolve()
プランカーの例プリプロセッサの置換は
system.jsファイルにあります。例を参照してください。
通常、このような機能はプロジェクトでは必要ありませんが、役に立つ場合があります。
前の記事：
角度ライト。 HTMLでの
宣言型データバインディングの管理 、Angular Lightでの
ディレクティブの継承