如何使用AngularJS特性在一个div中插入多个div(即某种多元素模板)
提问于 2013-06-04 08:25:56
在我的AngularJS应用程序中，我想发出某种指令，将多个HTML元素插入到一个HTML元素中。
基本上，我希望Angular构建这个结果：
<div class="maindiv">
<!-- Below are some divs common to all "maindiv" -->
<div> ..XXX.. </div>
<div> ..YYY.. </div>
<!-- Below are some elements specific to maindiv1 -->
<div> ..ABCD.. </div>
<div> ..EFGH.. </div>
<div> ..IJKL.. </div>
</div>
<div class="maindiv">
<!-- Below are some divs common to all "maindiv" -->
<div> ..XXX.. </div>
<div> ..YYY.. </div>
<!-- Below are some elements specific to this particular maindiv -->
<div> ..1235.. </div>
<div> ..5678.. </div>
</div>..。来自如下所示的HTML：
<div class="maindiv" generate-common-stuff>
<!-- Below are some elements specific to maindiv1 -->
<div> ..ABCD.. </div>
<div> ..EFGH.. </div>
<div> ..IJKL.. </div>
</div>
<div class="maindiv" generate-common-stuff>
<!-- Below are some elements specific to this particular maindiv -->
<div> ..1235.. </div>
<div> ..5678.. </div>
</div>..。或者像这样：
<div class="maindiv">
<generate-common-stuff></generate-common-stuff>
<!-- Below are some elements specific to maindiv1 -->
...当我尝试创建自己的指令时，Angular抱怨我的模板中有多个根元素。
请注意，由于与其他库(JQueryMobile)不兼容，我无法在div下重新组合<div> ..XXX.. </div><div> ..YYY.. </div>并在模板中使用它。它们必须恰好插入在maindiv下面
你有关于如何实现它的想法吗？
回答 1
Stack Overflow用户
发布于 2013-06-04 08:38:19
尝试编写一个名为generate-stuff的指令，并将common和specific内容作为从作用域绑定的属性进行传递。
<generate-stuff common="commonStuffInScope" specific="specificStuffInScope"></generate-stuff>指令中的...and
myModule.directive('', function() {
return {
...
scope: {
common: "=common",
specific: "=specific"
}
...
};
});因此，在link函数中，您可以双向绑定到作用域上的公共变量和特定变量。
相关文档片段：http://docs.angularjs.org/guide/directive#directivedefinitionobject
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16913019
复制相关文章
点击加载更多
腾讯云开发者
