CODEWITHSUNDEEP
angularjsangularjs-directiveng-grid
Kabb5
Kabb5

Reputation: 3870

Dynamic ng-model for directive re-use

I have a page with one controller and three tabs, each tab shows its own ng-grid and a text box for filtering the visible rows (not the built-in filterbox).

I created this simple directive for the filter box that I want to use on each tab (as I have done on other pages).

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

This is filterTemplate.html:

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

I have created three ng-grids ($scope.gridOptions_1, $scope.gridOptions_2 and $scope.gridOptions_3) with each referencing the appropriate dataset for its tab.

My question is, how can I modify the directive so I can specify the ng-model to be gridOptions_1.filterOptions.filterText vs. gridOptions_2.filterOptions.filterText vs. gridOptions_3.filterOptions.filterText vs. plain old gridOption.filterOptions.filterText?

Here is what I tried, without success...

I would also like to be able to reuse the directive for the generic gridOptions case on other pages, so I also tried {{subgrid||''}} in the template, but did not go further in trying to accomodate a default case of '' until I figure out how to get the dynamic ng-model working first...

Thanks for your help and suggestions!

Upvotes: 1

Views: 1613

Answers (1)

Yann
Yann

Reputation: 2221

I think you can simply add scope: { subgrid: '=subgrid' } to the directive and make sure you call the directive with the attribute: <my-grid-filter sub-grid="gridOptions_1"></my-grid-filter>. (You tried with @subgrid, but @ is for text attributes while = is for actual binding between attributes and directive scope).

Upvotes: 3

Related Questions