Question

我有一个带有一个控制器和三个选项卡的页面，每个选项卡显示自己的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" />

我创建了三个ng-grid（$scope.gridOptions_1，$scope.gridOptions_2和$scope.gridOptions_3），每个都引用了其标签的相应数据集。

我的问题是，如何修改指令，以便我可以将ng-model指定为gridOptions_1.filterOptions.filterText与gridOptions_2.filterOptions.filterText与gridOptions_3.filterOptions.filterText对比{old} {{ 1}}？

这是我尝试过的，没有成功......

在指令

gridOption.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||''}}先工作......

感谢您的帮助和建议！

Answer 1

我认为您只需将scope: { subgrid: '=subgrid' }添加到指令中，并确保使用属性<my-grid-filter sub-grid="gridOptions_1"></my-grid-filter>调用该指令。（您尝试使用@subgrid，但@用于文本属性，而=用于属性和指令范围之间的实际绑定。）

用于指令重用的动态ng模型

1 个答案: