У меня есть страница с одним контроллером и тремя вкладками, каждая вкладка показывает свою собственную ng-сетку и текстовое поле для фильтрации видимых строк (а не встроенного фильтра).

Я создал эту простую директиву для блока фильтров, которую хочу использовать на каждой вкладке (как и на других страницах).

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-сетки ($scope.gridOptions_1, $scope.gridOptions_2 и $scope.gridOptions_3), каждая из которых ссылается на соответствующий набор данных для своей вкладки.

Мой вопрос: как я могу изменить директиву, чтобы указать ng-model как gridOptions_1.filterOptions.filterText против gridOptions_2.filterOptions.filterText против gridOptions_3.filterOptions.filterText против старого доброго 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 ...

Спасибо за вашу помощь и предложения!

1
Kabb5 5 Авг 2013 в 17:52

1 ответ

Лучший ответ

Я думаю, вы можете просто добавить scope: { subgrid: '=subgrid' } в директиву и убедиться, что вы вызываете директиву с атрибутом: <my-grid-filter sub-grid="gridOptions_1"></my-grid-filter>. (Вы пробовали использовать @subgrid, но @ предназначен для текстовых атрибутов, а = - для фактической привязки между атрибутами и областью действия директивы).

3
Yann 5 Авг 2013 в 18:51
Вы также можете определить его в элементе html. Просто напишите subgrid = "subgrid".
 – 
Zack Argyle
5 Авг 2013 в 19:19
@Yann, в этом есть смысл (= против @), спасибо; однако мне все еще не удается подключить subgrid к шаблону ... ng-model просто отображается в источнике как [subgrid] или {{subgrid}} (см. мой второй пуля в исходном посте)
 – 
Kabb5
5 Авг 2013 в 19:46
Дох! Ответ @Yann работает ... шаблон просто должен сказать ng-model="subgrid.filterOptions.filterText" (я пытался сделать его более сложным, чем нужно). Спасибо еще раз!
 – 
Kabb5
5 Авг 2013 в 21:36