web-dev-qa-db-ja.com

AngularJS：単一のAngularディレクティブで複数のサブ要素を変換します

私はAngularが初めてですが、かなり読み続けています。 http://docs.angularjs.org/guide/directiveでng-transcludeについて読んでいました。 ＃creating-custom-directives_demo_isolating-the-scope-of-a-directive そして、私はそれが何をするかを適切に理解していると思います。

次のようなコンテンツが含まれている要素に適用されるディレクティブがある場合

<my-directive>directive content</my-directive>

これにより、ディレクティブのテンプレート内の要素にng-transcludeのタグを付けることができ、要素に含まれるコンテンツはタグ付けされた要素内にレンダリングされます。

したがって、myDirectiveのテンプレートが<div>before</div><div ng-transclude></div><div>after</div>の場合、beforedirective contentafterとしてレンダリングされます。

これはすべてOKです私のQは、どういうわけか私のディレクティブにhtmlの単一ブロックよりも多くを渡すことは可能ですか？

例えば.

ディレクティブの使用法は次のようになります。

<my-multipart-directive>
     <part1>content1</part1>
     <part2>content2</part2>
</my-multipart-directive>

次のようなテンプレートがあります：

<div>
  this: <div ng-transclude="part2"></div>
   was after that: <div ng-transclude="part1"></div>
   but now they are switched
<div>

としてレンダリング

<div>
  this: <div ng-transclude="part2">content2</div>
   was after that: <div ng-transclude="part1">content1</div>
   but now they are switched
<div>

？

（自分で考えて）ノードのHTML値をモデルにバインドして、「トランスクルード」と呼ばずにそのような方法で使用できるようにすることができますか？.

ありがとう

angularjsangularjs-directiveangularjs-scope
36
epeleg

Angular 1.5から、複数のスロットを作成できるようになりました。transclude：trueの代わりに、objectと各スロットのマッピング：

https://docs.angularjs.org/api/ng/directive/ngTransclude

angular.module('multiSlotTranscludeExample', [])
 .directive('pane', function(){
    return {
      restrict: 'E',
      transclude: {
        'title': '?pane-title',
        'body': 'pane-body',
        'footer': '?pane-footer'
      },
      template: '<div style="border: 1px solid black;">' +
                  '<div class="title" ng-transclude="title">Fallback Title</div>' +
                  '<div ng-transclude="body"></div>' +
                  '<div class="footer" ng-transclude="footer">Fallback Footer</div>' +
                '</div>'
    };
})
33
kevinius

いい質問です。組み込みの方法があるかどうかはわかりませんが、かなり一般的な方法で自分で行うことができます。

次のように$ transcludeサービスを渡すことで、transcluded要素にアクセスできます。

$transclude(function(clone, $scope) {

クローンは、事前リンクされたトランスクルージョンされたコンテンツのコピーになります。次に、次のように要素のコンテンツにラベルを付けると：

    <div id="content">
        <div id="content0">{{text}}</div>
        <div id="content1">{{title}}</div>
    </div>

コンテンツをループして、次のようにコンパイルできます。

$scope.transcludes.Push($compile(clone[1].children[i])($scope));

すごい！ここで、テンプレートの正しい場所にコンテンツを配置するだけです

     '<div id="transclude0"></div>' +
     '<div id="transclude1"></div>' +

次に、リンク機能でコンテンツを正しく割り当てることができます

angular.element(document.querySelector('#transclude' + i)).append(scope.transcludes[i]);

fiddle を設定します。この設定を使用して遊ぶことができます。

これが役に立てば幸いです！

21
hassassin

私たちのプロジェクトでは、JSF 2のui：composition、ui：insert、ui：defineの後にマルチサイトトラスクルージョンをモデル化しました（ i：composition を参照）。

実装は、ui-template、ui-insert、ui-defineの3つの単純なディレクティブで構成されます（ angularjs-api/template/ui-lib.js を参照）。

テンプレートを定義するには、次のマークアップを記述します（ angularjs-api/template/my-page.html を参照）：

<table ui-template>
  <tr>
    <td ui-insert="menu"></td>
  </tr>
  <tr>
    <td ui-insert="content"></td>
  </tr>
</table>

ディレクティブを宣言します（ angularjs-api/template/my-page.js を参照）：

  var myPage = 
  {
    templateUrl: "my-page.html",
    transclude: true
  };

  angular.module("app").
    directive("myPage", function() { return myPage; });

最後に、ディレクティブをインスタンス化するには、記述する必要があります（ angularjs-api/template/sample.html を参照）：

<my-page>
  <div ui-define="content">
    My content
  </div>
  <div ui-define="menu">
    <a href="#file">File</a>
    <a href="#edit">Edit</a>
    <a href="#view">View</a>
  </div>
</my-page>

作業サンプルはrawgitで確認できます。 sample.html

参照： AngularJSのマルチサイトトランスクルージョン

1
Vladimir Nesterovsky