ディレクティブの属性として式を持つテンプレートを提供する

Question

属性を使ってディレクティブに "テンプレート"を渡したいと思っています。ここで私が達成しようとしているものの陳腐な例を示します。

このHTML：Hello Jim：

<greeter person-name="Jim" greeting-template="Hello {{name}}"></greeter> 

が出力を生成します。 greeting-template属性に{{name}}が親スコープで評価されますので、それはディレクティブリンク機能限り取得する前に、

function greeter($interpolate) { 
    var directive = { 
     link: link, 
     restrict: 'EA', 
     template: '<div>{{evaluatedTemplate}}</div>' 
    }; 
    return directive; 

    function link(scope, element, attrs) { 
     scope.name = attrs.personName; 
     scope.evaluatedTemplate = $interpolate(attrs.greetingTemplate)(scope); 
    } 
} 

しかし、それは動作しません：

は、私はこのようなディレクティブで試してみました。

最終的には、attrs.greetingTemplate〜の値が文字通りの文字列である必要があります。「Hello {{名前}}」。私はgreeting-templateの属性値を "Hello [name]"とし、補間する前に "["を "{{"に変換するなどの代替構文でこれを行うことができます。しかし、それは乱雑に感じる。結びつきについても見てきましたが、親のスコープに対するディレクティブを評価する方法は、私が複数の挨拶をしたときに問題を引き起こす可能性があります。

Answer 1

link関数を使用する代わりに、スコープへのリンクが発生する前に実行されるcompile関数を使用して、テンプレート要素（元のDOM要素）と解釈されない属性を引数として渡します。私はあなたがここで探しているものだと思います。 compile機能で

、あなたはそれをバインドすることができます（あなたはむしろcompileよりlinkを使用する場合link関数と同じである）あなたのpost-link機能で後で使用するための変数でuninterpolatedテンプレート文字列を格納することができあなたの範囲に。

だからあなたのディレクティブはcompileプロパティではなくlinkプロパティで、次のようになります。作業それを示す

function greeter($interpolate) { 
    var directive = { 
    compile: compile, 
    restrict: 'EA', 
    scope: true, 
    template: '<div>{{evaluatedTemplate}}</div>' 
    }; 
    return directive; 

    function compile(tElement, tAttrs) { 

    // save the uninterpolated template for use in our post-link function 
    var greetingTemplateUninterpolated = tAttrs.greetingTemplate; 

    return { 
     pre: function (scope, element, attrs) {}, 
     post: function (scope, element, attrs) { 
     scope.name = attrs.personName; 
     scope.evaluatedTemplate = $interpolate(greetingTemplateUninterpolated)(scope); 
     } 
    }; 
    } 
} 

Here's a fiddle。

およびhere's実際にどのように良い記事を説明しているのですかcompileおよびlinkが機能します。