用模板replaceng-include节点？
有点新的angular度。 是否有可能用包含模板的内容replace 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>
我有这个相同的问题，仍然希望ng-include的function包括一个dynamic模板。 我正在构build一个dynamic的Bootstrap工具栏，我需要CSS样式的清理标记才能正确应用。
这是我为有兴趣的人提出的解决scheme：
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()); } }; });
如果在上面的示例中使用了此解决scheme，那么将scope.dynamicTemplatePath设置为“test.html”会导致所需的标记。
所以感谢@ user1737909，我意识到ng-include不是要走的路。 指令是更好的方法，更明确。
var App = angular.module('app', []); App.directive('blah', function() { return { replace: true, restrict: 'E', templateUrl: "test.html" }; });
在html中：
<blah></blah>
我有同样的问题，我的第三方CSS样式表不喜欢多余的DOM元素。
我的解决scheme非常简单。 只要将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>
我敢打赌，这在大多数情况下都能正常工作，即使在技术上这不是问题所在。
另一种select是编写你自己的简单的replace/包含指令，例如
.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>
这是取代孩子的正确方法
angular.module('common').directive('includeReplace', function () { return { require: 'ngInclude', restrict: 'A', compile: function (tElement, tAttrs) { tElement.replaceWith(tElement.children()); return { post : angular.noop }; } }; });
以下指令扩展了ng-include原生指令function。
它添加了一个事件监听器来replace内容准备好和加载时的原始元素。
以原来的方式使用它，只需添加“replace”属性：
<ng-include src="'src.html'" replace></ng-include>
或者使用属性标记：
<div ng-include="'src.html'" replace></div>
这里是指令（记住要包含'include-replace'模块作为依赖）：
angular.module('include-replace', []).directive('ngInclude', function () { return { priority: 1000, link: function($scope, $element, $attrs){ if($attrs.replace !== undefined){ var src = $scope.$eval($attrs.ngInclude || $attrs.src); var unbind = $scope.$on('$includeContentLoaded', function($event, loaded_src){ if(src === loaded_src){ $element.next().replaceWith($element.next().children()); unbind(); }; }); } } }; });
我会select比@Brady Isom提供的更安全的解决scheme。
我宁愿依靠ng-include给出的onload选项来确保模板在尝试删除之前被加载。
.directive('foo', [function () { return { restrict: 'E', //Or whatever you need scope: true, template: '<ng-include src="someTemplate.html" onload="replace()"></ng-include>', link: function (scope, elem) { scope.replace = function () { elem.replaceWith(elem.children()); }; } }; }])
不需要第二个指令，因为一切都在第一个指令中处理。
