AngularJS - 如何transclude到腳本元素？

Question

See Plunker

我想指令元素的內容transclude爲<script>元素。

在下面的指令，當模板包含一個腳本標記，在transclusion不起作用以下：

app.directive('mdl', function(){ 
    return { 
     restrict: 'EA' 
     , replace: true 
     , transclude: true 
     , template: '<script id="modal.html" > <div ng-transclude> </div> </script>' 
    } 

}) 

，其中指令調用如下：

<mdlbody> <div>testing modal body</div> </mdlbody> 

產生的<main>元素是空的。然而，transclude工作時<script>標籤從模板字符串像這樣除去如預期，

template: '<div ng-transclude> </div>' 

或template: <div> <div ng-transclude> </div> <div>

只要模板字符串不裹<script>，將transclude作品。當ng-transclude直接放在<script ng-transclude>上時，Transclude也可以工作。不過，我想在<script>元素的更深層嵌套中插入transclude。

這是爲什麼？我如何獲得transclude與模板字符串中的<script>元素一起使用？ （使該指令的內容transcluded到<script>元素）

PS：爲了進一步澄清，我想transclude 到的腳本元素，因此最終結果應該是<script><main> transcluded content</main></script> （不<main> transcluded content</main>） 。

Answer 1

，如果你想引用一個模板，該指令然後用templateurl更換模板，因爲模板期望具有角指令一些HTML代碼編寫：

app.directive('mdl', function(){ 
return { 
    restrict: 'EA' 
    , replace: true 
    , transclude: true 
    , templateUrl: 'modal' 
} 

}) 

，並把下面的線在年底你.htm文件

<script type="text/ng-template" id="modal" > <main ng-transclude> </main> </script>