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>