0

在我的 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>在 a 下重新组合div并在模板中使用它。它们必须插入到正下方maindiv

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

4

1 回答 1

0

尝试编写一个指令，并将其作为属性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

于 2013-06-04T08:38:18.503 回答