Angular Light：遅延ディレクティブ接続とプリプロセッサ

ディレクティブの使用の柔軟性を高めるために、ディレクティブの「プリプロセッサ」を追加しました。 ディレクティブが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でのディレクティブの継承