1

我有一个带有一个控制器和三个选项卡的页面，每个选项卡都显示自己的 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-grids ($scope.gridOptions_1和$scope.gridOptions_2) $scope.gridOptions_3，每个都为其选项卡引用适当的数据集。

我的问题是，我怎样才能修改指令，以便我可以指定ng-modelto be gridOptions_1.filterOptions.filterTextvs. gridOptions_2.filterOptions.filterTextvs. gridOptions_3.filterOptions.filterTextvs. plain old 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||''}}模板中进行了尝试，但没有进一步尝试容纳 '' 的默认案例，直到我弄清楚如何获得动态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 回答