用模板替换ng-include节点？

Question

有点新的角度.是否可以用包含的模板的内容替换 ng-include节点？例如,用:

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

生成的html是:

<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>

但我想要的是:

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

Answer 1

我有同样的问题,仍然希望ng-include的功能包括动态模板.我正在构建一个动态的Bootstrap工具栏,我需要清洁标记才能正确应用CSS样式.

以下是我为那些感兴趣的人提出的解决方案:

HTML:

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

自定义指令:

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

如果在上面的示例中使用了此解决方案,则将scope.dynamicTemplatePath设置为"test.html"将导致所需的标记.

Answer 2

所以感谢@ user1737909,我意识到ng-include不是那样的.指令是更好的方法,更明确.

var App = angular.module('app', []);

App.directive('blah', function() {
    return {
        replace: true,
        restrict: 'E',  
        templateUrl: "test.html"
    };
});

在html中:

<blah></blah>

Answer 3

我有同样的问题,我的第三方CSS样式表不喜欢额外的DOM元素.

我的解决方案非常简单.只需将ng-include 1向上移动即可.而不是

<md-sidenav flex class="md-whiteframe-z3" md-component-id="left" md-is-locked-open="$media('gt-md')">
  <div ng-include="myService.template"></span>
</md-sidenav>

我只是做了:

<md-sidenav flex class="md-whiteframe-z3" md-component-id="left" md-is-locked-open="$media('gt-md')" ng-include="myService.template">
</md-sidenav>

我敢打赌,这在大多数情况下都有效,即使技术上不是问题所在.

Answer 4

另一种方法是编写自己的简单替换/包含指令,例如

    .directive('myReplace', function () {
               return {
                   replace: true,
                   restrict: 'A',
                   templateUrl: function (iElement, iAttrs) {
                       if (!iAttrs.myReplace) throw new Error("my-replace: template url must be provided");
                       return iAttrs.myReplace;
                   }
               };
           });

然后将使用如下:

<div my-replace="test.html"></div>

Answer 5

这是替换孩子的正确方法

angular.module('common').directive('includeReplace', function () {
    return {
        require: 'ngInclude',
        restrict: 'A',
        compile: function (tElement, tAttrs) {
            tElement.replaceWith(tElement.children());
            return {
                post : angular.noop
            };
        }
    };
});