0

テーブルのヘッダーとボディをレンダリングする table-div というディレクティブがあります。tbody 内の各行は、追加の機能を追加することも、追加しないこともできます。この機能がある場合、カスタム ディレクティブを含めてデータを出力し、その親ディレクティブのスコープにリンクする必要があります。

table-div ディレクティブ:

<div>here is header</div>
<div ng-repeat="row in tbody">
   <table-div-row data="row"></table-div-row>
   <table-div-row data="row" directive="deletable"></table-div-row> 
   <table-div-row data="row" directive="editAvailable"></table-div-row>
</div>

私の table-div-row ディレクティブは、この行に沿って見えます

<div>
  <p>some data here</p>
  <div class="{{directive}}"></div>
</div>

そして、私の editAvailable ディレクティブは次のようになります

<div>
  <p> name: {{parentDirectiveScope.name}}</p>
  <button>edit</button>
  <button>save</button>
</div>

これはどのように達成されますか？基本的に問題は、ディレクティブ名を保持する変数を何らかの方法でリンクし、それを何らかの方法で評価して実際にディレクティブを表示することです。これは可能ですか？

4

1 に答える 1

0

ng-include ディレクティブを使用してテンプレート ファイルをインクルードできることがわかりました。基本的に私のtable-div-rowは次のようになります

<div>
  <p>some data here</p>
  <ng-include src="{{directive}}"></ng-include>
</div>

{{ディレクティブ}} は、実際にはテンプレートへの URL になります。

そして、私のeditAvailable「ディレクティブ」は次のようになります

<div ng-controller="EditAvailableCtrl">
  <p> name: {{name}}</p>
  <button>edit</button>
  <button>save</button>
</div>

ディレクティブのように機能する EditAvailableCtrl を作成する必要があります (つまり、DOM インタラクションも含まれます)。

このソリューションの別の方法は見つかりませんでしたが、適切に機能しているようで、テンプレートを動的にロードできます。EditAvailableCtrl $scope は親スコープから継承されるため、多くの柔軟性が得られることに注意することが重要です。

私は提案を受け入れます。これは良い習慣ではないかもしれませんが、私にとってはうまくいきます。

于 2013-05-11T17:14:41.547 に答える