如何使用AngularJS功能在一个div中插入多个div（即某种多元素模板）

Question

在我的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> ..XXX.. </div><div> ..YYY.. </div>下一个div和在模板中使用它。 必须将它们插入到maindiv正下方

您对如何实施有任何想法？

Answer 1

尝试编写一个称为generate-stuff的指令，并将common和specific东西作为属性传递，并从作用域绑定。

<generate-stuff common="commonStuffInScope" specific="specificStuffInScope"></generate-stuff>

...以及您的指令中

myModule.directive('', function() {
  return {
    ...
    scope: {
      common: "=common",
      specific: "=specific"
    }
    ...
  };
});

因此，在链接函数中，您可以对作用域上的公共变量和特定变量进行双向绑定。

相关的文档片段： http : //docs.angularjs.org/guide/directive#directivedefinitionobject