Circular dependency Error when using a custom filter and filterOptions

Question

first I got a Filter "fromMSDate" that I use to transform json dates not normal dates, if this filter is place then refresh my input that is bound to filterOptions.filterText I get 'Circular dependency' and 'Unknown provider: fromMSDate | dateFilterProvider <- fromMSDate '

//Module


var mainApp = angular.module('mainApp', ['ngGrid']);

//Controller


    mainApp.controller('MandateListController', function MandateListController($scope) {
        $scope.filterOptions = { filterText: '' };
        $scope.mandates = data;
        $scope.gridOptions = {
            data: "mandates",
            filterOptions: $scope.filterOptions,
            sortInfo: { fields: ['ExpectedDate', 'ProjectName'], directions: ['desc', 'asc'], columns: ['ExpectedDate', 'ProjectName'] },
            columnDefs: [
                { field: 'ProjectName', displayName: 'Project Name', width: '30%', cellClass: 'text-center' },
                { field: 'Amount', displayName: 'Size', cellFilter: 'number:2', cellClass: 'text-right' },
                { field: 'RatingId', displayName: 'Rating', cellClass: 'text-center' },
                { field: 'CurrencyId', displayName: 'Currency', cellClass: 'text-center' },
                { field: 'MaturityId', displayName: 'Maturity', cellClass: 'text-center' },
                { field: 'EstimatedPl', displayName: 'Estimated P/L', cellFilter: 'number:2', cellClass: 'text-right' },
                { field: 'ExpectedDate', displayName: 'Expected Date', cellClass: 'text-center', cellFilter: "fromMSDate | date:'mediumDate'" }
                    ]
           };
    });

//filter


    mainApp.filter("fromMSDate", [function () {
         var result = function(date, formatstring) {
              if (formatstring === null || formatstring === undefined) {
                  formatstring = "DD MMM YYYY";
              }

              return moment(date).format(formatstring);
         };

        return result;    
    }]);

Is this all the code? You aren't injecting the "fromMSDate" filter anywhere, so according to this code, you shouldn't ever get the "Unknown Provider" error. You must have more code than what you've shown above. Somewhere you're injecting the "fromMSDate" filter. We need to see that code to know what other dependencies you have. — tennisgent
I think you don't need to inject filter since your module already know about then on created "mainApp.filter("fromMSDate"" That is all the code that I need, work fine the first time but fails on filtering — Acosta

GRaAL GRaAL · Accepted Answer · 2014-01-26T09:47:36

If I correctly understand you somehow include into the HTML page the contents of $scope.gridOptions.columnDefs[].cellFilter. In the last columnDef you have the following filter:

fromMSDate | date:'mediumDate'

I think you expect that date will be passed as the first argument and 'mediumDate' as the second, but filters in angular.js has another syntax and you need to write this way:

date | fromMSDate:'mediumDate'

Filters are added to the expression with | character and get the prior expression as the first argument. Other arguments could be specified after :.

So in your example angular.js recognizes 'date' as filter name and fails to find DateFilter or DateFilterProvider for it.

Circular dependency Error when using a custom filter and filterOptions

1 Answers