1

1 つのコントローラーと 3 つのタブを含むページがあり、各タブには独自の ng-grid と、表示される行をフィルター処理するためのテキスト ボックス (組み込みのフィルター ボックスではありません) が表示されます。

各タブで使用するフィルター ボックス用に、この単純なディレクティブを作成しました (他のページで行ったように)。

myDirectives.directive('myGridFilter', function() {
  return {
    restrict: 'E',
    templateUrl: 'filterTemplate.html'
  }
});

これは filterTemplate.html です:

<label input="filterLabel" for="filterBox">Filter: </label>
<input id="filterBox" type="text" placeholder="type filter here" ng-model="gridOptions.filterOptions.filterText" />

3 つの ng-grid ( $scope.gridOptions_1、$scope.gridOptions_2および$scope.gridOptions_3) を作成し、それぞれがそのタブの適切なデータセットを参照しています。

私の質問は、どのようにディレクティブを変更して、vs. vs. vs. plain oldng-modelと指定できるようにするかということです。gridOptions_1.filterOptions.filterTextgridOptions_2.filterOptions.filterTextgridOptions_3.filterOptions.filterTextgridOption.filterOptions.filterText

これが私が試したものですが、成功しませんでした...

  • scope: { subgrid: '@subgrid' }ディレクティブに追加
  • テンプレート ファイルを次のように変更しました。
    • ng-model="gridOptions{{subgrid}}.filterOptions.filterText"
    • ng-model="gridOptions[subgrid].filterOptions.filterText"
    • ng-model="gridOptions[scope.subgrid].filterOptions.filterText"
  • マイページのディレクティブへの参照を次のように変更しました<myGridFilter subgrid="_1"></myGridFilter>

gridOptionsまた、他のページで一般的なケースのディレクティブを再利用できるようにしたいので{{subgrid||''}}、テンプレートも試しましたが、取得方法がわかるまで、デフォルトのケース '' に対応しようとはしませんでした。最初に動的ng-model作業...

あなたの助けと提案をありがとう！

4

1 に答える 1

3

scope: { subgrid: '=subgrid' }ディレクティブに追加するだけで、属性を指定してディレクティブを呼び出すことができると思います: <my-grid-filter sub-grid="gridOptions_1"></my-grid-filter>。（ で試しまし@subgridた@が、テキスト属性用で=あり、属性とディレクティブスコープ間の実際のバインディング用です）。

于 2013-08-05T14:51:10.660 に答える