AngularJS - 如何嵌入到脚本元素中？

Question

See Plunker

我想将指令元素的内容转换为<script> 元素。

在以下指令中，当模板包含如下脚本标记时，嵌入不起作用：

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> 元素为空。但是，当 <script> 标记像这样从模板字符串中删除时，transclude 会按预期工作，

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

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

只要模板字符串没有包含在 <script> 中，transclude 就可以工作。 当 ng-transclude 直接放在 <script ng-transclude> 上时，Transclude 也可以工作。但是我想在 <script> 元素内更深层次的嵌套中插入嵌入。

为什么会这样？如何让 transclude 使用模板字符串中的 <script> 元素？ （以便指令的内容被嵌入到<script> 元素中）

P.S：为了进一步澄清，我试图将 嵌入 script 元素，因此最终结果应该是<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>