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ます。commonspecific

<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 に答える