2

テンプレートを構成オブジェクトのプロパティとして受け取り、そのテンプレートをヘッダーとフッターで囲まれた回数だけ表示するカスタム ディレクティブを作成しようとしています。そのようなディレクティブを作成する最善の方法は何ですか?

ディレクティブは、構成オブジェクトをスコープ オプションとして受け取ります。

var app = angular.module('app');
app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      config: '=?'
    }
    ...
  }
}

このオブジェクト (config と呼ばれる) は、上記のコードに示されているように、オプションで双方向バインディングを使用してディレクティブに渡されます。構成オブジェクトには、テンプレートと、ディレクティブがテンプレートを表示する回数を示す数値を含めることができます。たとえば、次の構成オブジェクトについて考えてみます。

var config = {
  times: 3,
  template: '<div>my template</div>'
};

ディレクティブに渡されると、ディレクティブは (ng-repeat を使用して) テンプレートを 5 回表示します。ディレクティブは、テンプレートの上下にヘッダーとフッターも表示します。

<div>the header</div>
<div>my template</div>
<div>my template</div>
<div>my template</div>
<div>the footer</div>

このディレクティブを実装する最良の方法は何ですか? 注: 返信するときは、Plunker などのコード プレイグラウンドで実際に動作する例を提供してください。これまでに調べた実装のそれぞれで問題が発生したためです。

Update、私が調査したソリューションには次のものがあります。

  1. ディレクティブの link 関数を使用して、ヘッド、ng-repeat を含むテンプレート、およびフッターを追加します。これは、何らかの理由でテンプレートが繰り返されないという問題に悩まされており、ソリューション全体がハックのように見えます。
  2. 構成オブジェクトからのテンプレートを、ディレクティブ自体のテンプレートの途中に挿入します。jqLit​​e は jQuery ベースの API から CSS セレクターのすべての概念を削除したように見えるため、これは難しいことがわかります。
  3. テンプレートを構築するための compile 関数の使用。これは私には正しいように思えますが、うまくいくかどうかはわかりません。
4

2 に答える 2

0

ng-transcludeヘッダーとフッターのラッパーはディレクティブによって提供されるため、条件に基づいて内部コンテンツを変更する必要があるため、この場合に使用すると思います。

マークアップ

<my-directive>
  <div ng-repeat="item in ['1','2','3']" ng-bind-html="config.template| trustedhtml"><div>
</my-directive>

指令

var app = angular.module('app');
app.directive('myDirective', function($sce) {
  return {
    restrict: 'E',
    transclude: true,
    template: '<div>the header</div>'+
                 '<ng-transclude></ng-transclude>'+
              '<div>the footer</div>',
    scope: {
      config: '=?'
    }
    .....
  }
}

フィルター

app.filter('trustedhtml', function($sce){
   return function(val){
      return $sce.trustedHtml(val);
   }
})
于 2015-05-01T22:07:10.783 に答える