更换NG-包括模板节点？ [英] Replace ng-include node with template?

问题描述

还挺新的角度。是否有可能为替换的NG-包括与包括模板的内容节点？例如，对于

 ＆LT; D​​IV NG-应用＆GT;
    ＆LT;脚本类型=文/ NG-模板ID =test.html的＆GT;
        ＆所述p为H.;试验＆下; / P＆GT;
    ＆LT; / SCRIPT＆GT;
    ＆LT; D​​IV NG-包括SRC =的test.html'＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

生成的HTML是：

 ＆LT; D​​IV NG-应用＆GT;
    ＆LT;脚本类型=文/ NG-模板ID =test.html的＆GT;
        ＆所述p为H.;试验＆下; / P＆GT;
    ＆LT; / SCRIPT＆GT;
    ＆LT; D​​IV NG-包括SRC =的test.html'＆GT;
        ＆LT;跨度类=NG-范围＆GT; ＆LT; / SPAN＆GT;
        ＆所述p为H.;试验＆下; / P＆GT;
        ＆LT;跨度类=NG-范围＆GT; ＆LT; / SPAN＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

但我想要的是：

 ＆LT; D​​IV NG-应用＆GT;
    ＆LT;脚本类型=文/ NG-模板ID =test.html的＆GT;
        ＆所述p为H.;试验＆下; / P＆GT;
    ＆LT; / SCRIPT＆GT;
    ＆所述p为H.;试验＆下; / P＆GT;
＆LT; / DIV＆GT;
 

解决方案

我有这个同样的问题，仍然希望的特性

NG-包括包括动态模板。我是建设一个充满活力引导工具栏，我需要适当应用CSS样式的清洁标记。

下面是我想出了那些有兴趣谁解决方案：

HTML

 ＆LT; D​​IV NG-包括SRC =dynamicTemplatePath包括替换＆GT;＆LT; / DIV＆GT;
 

自定义指令：

  app.directive（'includeReplace'，函数（）{
    返回{
        要求：'ngInclude'，
        限制：'A'，/ *可选* /
        链接：功能（范围，EL，ATTRS）{
            el.replaceWith（el.children（））;
        }
    };
}）;
 

如果该溶液中在上面的例子中使用的，设置scope.dynamicTemplatePath为'的test.html'将导致所需的标记。

Kinda new to angular. Is it possible to replace the ng-include node with the contents of the included template? For example, with:

<div ng-app>
    <script type="text/ng-template" id="test.html">
        <p>Test</p>
    </script>
    <div ng-include src="'test.html'"></div>
</div>

The generated html is:

<div ng-app>
    <script type="text/ng-template" id="test.html">
        <p>Test</p>
    </script>
    <div ng-include src="'test.html'">
        <span class="ng-scope"> </span>
        <p>Test</p>
        <span class="ng-scope"> </span>
    </div>
</div>

But what I want is:

<div ng-app>
    <script type="text/ng-template" id="test.html">
        <p>Test</p>
    </script>
    <p>Test</p>
</div>

解决方案

I had this same issue and still wanted the features of ng-include to include a dynamic template. I was building a dynamic Bootstrap toolbar and I needed the cleaner markup for the CSS styles to be applied properly.

Here is the solution that I came up with for those who are interested:

HTML:

<div ng-include src="dynamicTemplatePath" include-replace></div>

Custom Directive:

app.directive('includeReplace', function () {
    return {
        require: 'ngInclude',
        restrict: 'A', /* optional */
        link: function (scope, el, attrs) {
            el.replaceWith(el.children());
        }
    };
});

If this solution were used in the example above, setting scope.dynamicTemplatePath to 'test.html' would result in the desired markup.

这篇关于更换NG-包括模板节点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！