如何使用指令屬性值創建動態模板

我創建了一個指令，並且想要使用屬性爲wm.data.typeName的動態模板。如何使用指令屬性值創建動態模板

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

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

和指令fillChoose是

(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>。

如何使模板成爲<div><span>html code</span></div>？

來源

2016-04-26 DivX

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

現在這種非常情況下，一個簡單的

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

會的工作，但我給了$編譯的事情，因爲你可以只給了什麼你真正想做的簡化版本。

來源

2016-04-26 14:11:34 Walfrat

在你的方式我得到 <DIV> HTML代碼</DIV > 不

html code

然後做一個過濾器的使用$ sce.trustAsHtml，但它無法正常工作 – DivX

你要打印

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

但這將工作一次，因爲模板函數將調用一次，當（當角卡列斯編譯編譯模板）指令進行初始化，這是爲什麼你需要通過指令的範圍

來源

2016-04-26 18:13:02

如何使用指令屬性值創建動態模板

回答

相關問題