0

説明するのは複雑ですが、試してみます。

http://plnkr.co/edit/PrVXRvHAC7wtgHUEU1HB?p=preview

この例は必要に応じて機能しますが、これを達成した方法が気に入らないだけです。

例に示されていることを説明しようと思います。

<repeater>

  <item name="Hello item">
    <h4>Hello</h4>
    <p>Lorem ipsum dolor sit amet</p>
  </item>

  <item name="Worlditem">
    <h4>World</h4>
    <em>Mauris elementum elementum enim at suscipit.</em>
  </item>

</repeater>

<item>repeaterディレクティブは、自身をとして親に「登録」する必要がありavailable_itemます。そして、それは現時点では表示されるべきではありません。

<repeater>ディレクティブは、利用可能な項目のメニューを出力し、メニュー項目をクリックした後、項目のテンプレートをそのコンテンツに追加する必要があります。たとえば、repeaterテンプレートは次のようになります。

<div>
  <ul>
    <li ng-repeat="item in available_items">
      <a href="javscript:;" ng-click="add2content(item)">{{item}}</a>
    </li>
  </ul>

  <div id="content">
    <div ng-repeat="item in content_items track by $index">
      <ng-include src="item"></ng-include>
    </div>
  </div>

</div>

では、実際のplkr.co の例で何が気に入らないのでしょうか?

に含めなければなら<div ng-transclude></div>ないのは好きではありません。repeater.htmlそうし<item>ないと、がコンパイルされなくなります。しかし、ページの読み込み時にアイテムを印刷する必要はありません。それらは単なるテンプレートです。テンプレートを空の文字列に設定<items>しましたが、ソースに空の<item>タグが表示され、これが気に入りません..

何が嫌なのかわからないけど、全部そろってる感じhard-codedじゃない？

repeaterのディレクティブが次の順序でコンパイルされる場合:

  1. controller() - add2available() 関数が登録されます
  2. プレリンク()
  3. //今ではすべてのitemディレクティブに行き、リピーターに自分自身を登録することができます
  4. postLink()
  5. template() - リピーターがテンプレートを変更するようになりました。ng-transclude

私はそれを行うことは不可能だと確信しています。また、私のコードで何が気に入らないのかわかりませんが、私のコードを改善する他の方法を見つけていただければ幸いです。

どうもありがとうございました！

PS<item>ディレクティブをいくつかの<script type="text/ng-template" id="">タグに置き換えることができることはわかっていますが<item>、例で提供されているとおりにする必要があります。

4

1 に答える 1

1

このplunkrは、望まない部分 (つまり、ダミー<transclude>タグと空の<item>タグ) を除いて、達成したいことを行います。また、属性に HTML を格納する、空のテンプレートを返す、テンプレート キャッシュを汚染するなどのハックもクリーンアップしました。

このソリューションの重要な要素は、$transcludeサービスを使用して、トランスクルードされたコンテンツで宣言されたディレクティブをコンパイルおよびリンクすることです。更新されたスクリプト全体を以下に示します。

script.js

angular.module('repeaterApp', [])
  .directive('repeater', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      templateUrl: 'repeater.html',
      controller: function($scope, $element, $transclude) {
        var available_items = $scope.available_items = [];
        var content_items = $scope.content_items = [];

        $scope.add2content = function(item) {
          content_items.push(item);
        };

        $scope.add2available = function(item) {
          available_items.push(item);
        };

        $transclude($scope);
      }
    };
  })
  .directive('item', function($templateCache, $sce) {
    return {
      restrict: 'E',
      link: function(scope, element, attrs) {
        scope.add2available({
          name: element.attr('name'),
          html: $sce.trustAsHtml(element.html())
        });
      }
    };
  });

repeater.html

<div>
  <ul>
    <li ng-repeat="item in available_items">
      <a href="javscript:;" ng-click="add2content(item)">{{item.name}}</a>
    </li>
  </ul>

  <div id="content">
    <div ng-repeat="item in content_items track by $index" 
         style="background: #f4f4f4; padding: 5px; margin: 5px; clear: both;"
         ng-bind-html="item.html">
    </div>
  </div>
</div>

index.html

<repeater>

  <item name="Hello item">
    <h4>Hello</h4>
    <p>Lorem ipsum dolor sit amet</p>
  </item>

  <item name="Worlditem">
    <h4>World</h4>
    <em>Mauris elementum elementum enim at suscipit.</em>
  </item>

</repeater>
于 2014-11-25T01:39:21.547 に答える