Using a custom Angular filter as a cellFilter for ui-grid columnDefs defined in an Angular constant

Question

In my Angular app (myApp) I have a custom filter (myFilter) and I am using UI Grid with multiple grids (myGrid1, myGrid2, etc.) to display my data in various view of my app. Since many of the columns are used on more than one grid, I have placed their column definitions within an Angular constant for use throughout my app.

I am not having any luck using myFilter as a cellFilter for a subset of the column definitions in the constant. You can't inject a filter into a constant and injecting the constant into a config() also does not work (unknown provider error).

Here's a glimpse at what my code looks like:

angular.module('myApp', ['MyFilter'])
  .constant('MyColumns', {
    firstName: {
      cellClass: 'myCellClass',
      name: 'firstName'
    },
    lastName: {
      cellClass: 'myCellClass',
      // cellFiler: 'myFilter', // DOES NOT WORK
      name: 'lastName'
    }
    // etc.
  })
  .filter('myFilter',
    function() {
      // leaving out what filter does for brevity
      return;
    }
  )
  .controller('MyController',
    function (MyColumns) {
      var myData; // leaving out data for brevity

      var myGrid1 = {
        columnDefs: [
          MyColumns.lastName,
          MyColumns.firstName
          // etc.
        ],
        data: myData
        // etc.
      };
    }
  )
  /*
  .config(function (MyColumns) {
    MyColumns.lastName.cellFilter = 'myFilter'; // DOES NOT WORK
  })*/
;

Is there a way I can use myFilter on the column definitions in the constant? Thanks for your help!

versions: Angular 1.5.8, UI Grid 3.2.6

Answer 1

In the process of cleaning up and fixing the code in my question, I got a working solution. See below:

angular.module('myApp', ['ui.grid', 'MyFilter'])
  .constant('MyColumns', {
    firstName: {
      cellClass: 'myCellClass',
      cellFilter: 'myFilter',
      name: 'firstName'
    },
    lastName: {
      cellClass: 'myCellClass',
      name: 'lastName'
    }
    // etc.
  })
  .controller('MyController',
    function(MyColumns) {
      var vm = this;

      var myData = [{
        firstName: 'Hillary',
        lastName: 'Clinton'
      }, {
        firstName: 'Donald',
        lastName: 'Trump'
      }, {
        firstName: 'Gary',
        lastName: 'Johnson'
      }];

      var myGrid1 = {
        columnDefs: [
          MyColumns.lastName,
          MyColumns.firstName
          // etc.
        ],
        data: myData
          // etc.
      };

      angular.extend(vm, {
        myGrid1: myGrid1,
        myData: myData
      });
    }
  )
  .config(function(MyColumns) {
    MyColumns.lastName.cellFilter = 'myFilter';
  });

angular.module('MyFilter', [])
  .filter('myFilter',
    function() {
      return function(input) {
        return '▢ ' + input;
      };
    }
  );

<link href="http://ui-grid.info/release/ui-grid.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>

<script src="http://ui-grid.info/release/ui-grid.js"></script>

<div ng-app="myApp" ng-controller="MyController as MyCtl">
  <div ui-grid="MyCtl.myGrid1"></div>
</div>

(I also upgraded from UI Grid 3.2.6 to 3.2.9, not sure if that had an impact)

Answer 2

I think you just simply has wrong DI name, based on doc when you register a filter filterName you should inject dependency name <filterName>Filter

So, if your register .filter('myFilter',... you should inject ['myFilterFilter'] instead.