对angular有点陌生。是否可以用包含模板的内容来替换 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的特性能够包含一个动态模板。我正在构建一个动态的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());
}
};
});
如果在上面的示例中使用了此解决方案,则设置作用域。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元素。
我的解决方案超级简单。把n -include向上移动。所以不用
<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>
我敢打赌这在大多数情况下都会起作用,即使它在技术上不是问题所要求的。
另一种选择是自己编写简单的replace/include指令,例如
.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本地指令的功能。
它添加了一个事件侦听器,以便在内容准备好并加载时替换原始元素。
按原方式使用,只需添加"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();
};
});
}
}
};
});
我会选择一个比@Brady Isom提供的更安全的解决方案。
我更喜欢依赖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());
};
}
};
}])
不需要第二个指令,因为一切都在第一个指令中处理。