Question

我想将指令元素的内容转换为<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>元素为空。但是，当从模板字符串中删除<script>标记时，transclude会按预期工作，

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

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

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

为什么会这样？如何使用模板字符串中的<script>元素进行转换？（以便将指令的内容转换为<script>元素）

P.S：为了进一步澄清，我试图将转换为 脚本元素，因此最终结果应为<script><main> transcluded content</main></script> （不 <main> transcluded content</main>）。

Answer 1

如果你试图引用这个指令的模板然后用templateurl替换模板，因为模板需要一些带有angular指令的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>

AngularJS - 如何转换为脚本元素？

1 个答案: