我正在尝试在其中包含一个HTML代码段ng-repeat,但我无法让include工作.似乎当前的语法与ng-include以前的语法不同:我看到许多例子使用
<div ng-include src="path/file.html"></div>
但在官方文档中,它表示要使用
<div ng-include="path/file.html"></div>
但是然后在页面上显示为
<div ng-include src="path/file.html"></div>
无论如何,我试过了
<div ng-include="views/sidepanel.html"></div>
<div ng-include src="views/sidepanel.html"></div>
<ng-include src="views/sidepanel.html"></ng-include>
<ng-include="views/sidepanel.html"></ng-include>
<ng:include src="views/sidepanel.html"></ng:include>
我的代码片段不是很多代码,但是它有很多内容; 我在里面ng-repeat读动态加载模板可能会导致问题,所以我用sidepanel.html单词替换了内容foo,但仍然没有.
我也尝试直接在页面中声明模板,如下所示:
<script type="text/ng-template" id="tmpl">
foo
</script>
并贯穿ng-include引用脚本的所有变体,但id仍然没有.
我的页面中有更多内容,但现在我已将其删除到这个:
<!-- index.html -->
<html>
<head>
<!-- angular includes -->
</head>
<body ng-view="views/main.html"> <!-- view is actually set in the router -->
<!-- views/main.html -->
<header>
<h2>Blah</h2>
</header> …我正在努力思考如何使用ng-include不使用额外的DOM元素,因为我正在从简单的HTML演示中构建一个角度应用程序.我正在使用非常纤薄的HTML与完全开发的,严格的DOM耦合的CSS(由SASS构建)和重构是我想不惜一切代价避免的.
这是实际的代码:
<div id="wrapper">
<header
ng-controller="HeaderController"
data-ng-class="headerType"
data-ng-include="'/templates/base/header.html'">
</header>
<section
ng-controller="SubheaderController"
data-ng-class="subheaderClass"
ng-repeat="subheader in subheaders"
data-ng-include="'/templates/base/subheader.html'">
</section>
<div
class="main"
data-ng-class="mainClass"
data-ng-view>
</div>
</div>
我需要<section>作为重复元素,但有自己的逻辑和不同的内容.内容和重复次数都取决于业务逻辑.如您所见,将ng-controller和ng-repeat放在<section>元素上将不起作用.但是,插入一个新的DOM节点会是什么,这正是我想要避免的.
我错过了什么？这是最佳做法还是有更好的方法？
编辑:只是为了澄清评论中的问题,我试图生成的最终HTML将是:
<div id="wrapper">
<header>...</header>
<section class="submenuX">
some content from controller A and template B (e.g. <ul>...</ul>)
</section>
<section class="submenuY">
different content from same controller A and template B (e.g. <div>...</div>)
</section>
<section class="submenuZ">
... (number of repetitions is defined in controller A e.g. through some service)
</section>
<div>...</div>
</div>
我想使用相同的模板B(subheader.html)的原因是为了代码清洁.我设想subheader.html有一些ng-switch来返回动态内容. …
我有这样的多个观点:http://www.funnyant.com/angularjs-ui-router/
我将它们加载到我的页面中
<div data-ui-view="content"></div> --- 75% width
<div data-ui-view="sidebar"></div> --- 25% width
现在,当加载内容时,我希望加载的内容不会加载到这些ui-view div中,而是替换它们.可能吗 ？因为如果他们不替换那么在我的情况下浮动将不起作用,侧边栏显示内容.
请帮忙
谢谢
所以AngularJs弃用Replace指令的属性.参考
背景:
.directive('myDir', function($compile) {
return {
restrict: 'E',
template: '<div>{{title}}</div>'
}
});
这将输出:
<my-dir>
<div> some title </div>
</my-dir>
所以,Replace将替换<my-dir></my-dir>为template.这几天有什么相同的？或者只是使用指令restrict: 'A'.
我创造了这个:
.directive('myDir', function($compile) {
return {
restrict: 'E',
template: '<div>{{title}}</div>',
link: link
};
function link(scope, iElem, IAttr, ctrl, transcludeFn) {
var parent = iElem.parent();
var contents = iElem.html();
iElem.remove();
parent.append($compile(contents)(scope));
}
});
这将输出:
<div> some title </div>