AngularJs - Use custom filter inside directive controller

Question

Scenario
I have an array of users containing information about them, I do an ng-repeat combined with a custom directive that generates an HTML user card, keeping the scope of each card relative to the individual user, inside the user model there is a value that I need to filter with a custom filter before the template gets compiled, because if I do it inside the template the time it takes to be filtered makes the tooltip not to show until the value is ready and that looks as if something is not working.

My code so far

// userCard directive
angular.module('userCard', []).directive('UserCard', function() {
  return {
    restrict: 'EA',
    templateUrl: 'userCard.tpl.html',
    scope: {
        user: '='
    },
    controller: ['$scope', 'fromNowFilter', function($scope, fromNowFilter) {

        angular.forEach($scope.user.reminders, function(reminder) {
            reminder.last_sent = reminder.last_sent === null ? 'No reminder has been sent!' : fromNowFilter(reminder.last_sent);
        });
    }],
    link: function(scope, element) {
        // Add the base class to the user card element
        element.addClass('user-card');
    }
  };
});


// fromNow custom filter
angular.module('userCard').filter('fromNow', function() {
  return function(date) {
    return moment(date).fromNow();
  };
});


// The error I keep getting
Unknown provider: fromNowFilterProvider <- fromNowFilter

PSL · Accepted Answer · 2015-06-21 00:48:26Z

21

Try inject filterprovider and run your filter.

controller: ['$scope', '$filter', function($scope, $filter) {
       var fromNowFilter = $filter('fromNow');
        angular.forEach($scope.user.reminders, function(reminder) {
            reminder.last_sent = reminder.last_sent === null ? 'No reminder has been sent!' : fromNowFilter(reminder.last_sent);
        });
    }],

edited Jun 21, 2015 at 0:48

answered Aug 29, 2014 at 1:11

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

CupOfJoe Over a year ago

Just tried that but still getting the same error, I am trying to follow the Angular docs, what I understand is that you need to postfix your filter name with Filter to inject it.

PSL Over a year ago

@CupOfJoe Yeah that should have worked as well.. Are you sure you have loaded the scipt for the filter in your app?

CupOfJoe Over a year ago

Yes, I tested it inside the template and it works, but cant' get it to inject inside the directives controller.

PSL Over a year ago

@CupOfJoe It works for me.. See this demo. plnkr.co/edit/0jhiqM?p=preview Which version of angular you are using?

Balachandran Over a year ago

it should be like var fromNowFilter = $filter('fromNow'); not var fromNowFilter = $filter('fromNowFilter '); we don't want to concatenate filter

|

Collectives™ on Stack Overflow

AngularJs - Use custom filter inside directive controller

1 Answer 1

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Linked

Related