ディレクティブ属性値を持つ動的テンプレートを作成する方法

Question

ディレクティブを作成し、属性がwm.data.typeNameの動的テンプレートを使用したいとします。

wm.data.typeName = "<span>html code</span>" 

<fill-choose model-input="wm.data.modelInput" text="wm.data.typeName"></fill-choose> 

とディレクティブはが

(function() { 
    'use strict'; 

    angular 
    .module('learn') 
    .directive('fillChoose', fillChoose); 

    /** @ngInject */ 
    function fillChoose($showdown) { 
    var directive = { 
     restrict: 'AE', 
     template: function(elem, attr) { 
     //return $showdown.makeHtml(fill.modelInput); 
     return '<div>'+ attr.modelInput +'</div>'; 
     }, 
     scope: { 
     modelInput: '=', 
     text: '=' 
     }, 
     controller: FillChooseController, 
     controllerAs: 'fill', 
     bindToController: true 
    }; 

    return directive; 

    /** @ngInject */ 
    function FillChooseController($scope) { 
     var vm = this; 
    } 
    } 

})(); 

である。しかし、この方法では、テンプレートは<div>wm.data.modelInput</div>なりますfillChoose。

テンプレートを作成する方法<div><span>html code</span></div>？

Answer 1

link: function(scope, elem, attr) { 
    //return $showdown.makeHtml(fill.modelInput); 
    elem.html($compile('<div>{{fill.modelInput}}</div>')(scope)); 
    } 

は今、この非常にケースにシンプルな

template:'<div>{{fill.modelInput}}</div>'; 

は動作しますが、あなたは、あなたが本当に何をしようとしての唯一の簡易版を与えた可能性があるため、私は$コンパイル事を与えました。

Answer 2

は、あなたはそれを

<fill-choose model-input="{{ wm.data.modelInput }}" text="wm.data.typeName"></fill-choose> 

を印刷する必要がなく、テンプレート関数が呼び出されますので、これは、一度に動作します、それはです（角callesテンプレートをコンパイルするコンパイル時にを）ディレクティブが初期化され、一度なぜディレクティブのスコープ