How to call one filter from another filter in angular.js

Question

I have a filter, linkifyStuff, in which I want some variables processed using another filter. I can't figure out the syntax to call one filter from another.

I know about filter chaining – that's not what I want to do. I want to apply a filter to a local variable in linkifyStuff filter, not to its input or output.

I would expect something like the folowing to work, but $filter('filtername') is not the correct syntax apparently.

module.filter('sanitizeStuff', function() {
    // ...
})

module.filter('prettifyStuff', function() {
    // ...
})

module.filter('linkifyStuff', function($filter) {
    return function(text) {
        // ...
        // ...
        return $filter('sanitizeStuff')(foo) + ' whatever ' + $filter('prettifyStuff')(bar)
    }
})

I could write a plain js functions for sanitizeStuff and sanitizeStuff and call that function from these filters but this seems wrong. Any advice on how to do it the angular way?

Thank you.

Khanh TO · Accepted Answer · 2013-12-21 06:27:26Z

75

Inject your filters into linkifyStuff using <filterName>Filter syntax. Like this:

app.filter('linkifyStuff', function(sanitizeStuffFilter,prettifyStuffFilter) {
    return function(text) {

        return sanitizeStuffFilter(text) + ' whatever ' + prettifyStuffFilter(text);
    }
});

DEMO

answered Dec 21, 2013 at 6:27

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

4 Comments

Henrik N Over a year ago

Excellent, thank you! And this is how you can spec a filter that injects another filter (CoffeeScript): gist.github.com/henrik/06122aedab2f2eace527

useless Over a year ago

is there any way to do this for default filters?, i.e. date

Khanh TO Over a year ago

@useless: I'm not sure if angular allows it, but it should be possible. There should not be a difference between custom filters and built-in filters in this respect. If it does not work for you, you could try: $filter('date')

useless Over a year ago

no, it does not work, that is why I mention this. regarding using $filter, I am at the definition of another filter, and I dont have (didnt had, now I do) the reference of neither the app or the $filter dependency.

rjm226 · Accepted Answer · 2013-12-21 05:45:49Z

I've ran into something like this before when filtering comment inputs. I had 4 different filters, when the user clicked submit it would run a function that would run all 4 filters on the comment copy. Threw my filters in there for good measure. WARNING: Make sure you inject $filter into your controller, I hate when I forget to inject things. Here is the code:

INJECTION:

.controller('Controller', function ($scope, $filter){
    //CODE GOES HERE
});

HTML:

<ul ng-repeat="comment in comments">
    <li>{{comment.user_name}}</li>
    <li dynamic="deliberatelyTrustDangerousSnippet(comment.comment_copy)"></li>
</ul>

CONTROLLER:

$scope.deliberatelyTrustDangerousSnippet = function(comment) {
    comment = $filter('breaks')(comment);
    comment = $filter('links')(comment);
    comment = $filter('images')(comment);
    comment = $filter('youtubeLinks')(comment);
    return comment;

};

FILTERS:

.filter('breaks', function () {
    return function (text) {
        if (text !== undefined) return text.replace(/&#10;/g, '<br />');
    };
})
.filter('links', function () {
    return function (text) {
        if (text !== undefined){
            return text.replace(/(?:http:\/\/)?(?:www\.)?((?:[\w-\.]*)(?:\.(?:com|net|org|co|be))(?:(?:[\/?\w?=?&?(?:&amp;)?\.?-]*)))/g, '<a target="_blank" href="http://$1">$1</a>');
        }
    };
})
.filter('images', function () {
    return function (text) {
        if (text !== undefined){
            return text.replace(/(?:<.*=")(.*(?:(?:\.(?:jpg|JPG|png|PNG|gif|GIF|jpeg|JPEG))))(?:")(?:.*(?:<\/a>))/g, '<img src="$1"/>');
        }
    };
})
.filter('youtubeLinks', function () {
    return function (text) {
        if (text !== undefined){
            return text.replace(/(?:<.*=")(?:(?:(?:(?:http:\/\/)|(?:www\.)|(?:http:\/\/www\.))(?:(?:youtube\.com.*v=)|(?:youtu\.be\/))((?:\w|\d|-)*)(?:(?:&amp;feature=related)?)))(?:")(?:.*(?:<\/a>))/g, '<youtube id="$1"></youtube>');
        }
    };
})

Kevin Chung · Accepted Answer · 2015-05-20 22:03:56Z

@useless asked if there was "any way to do this for default filters."

A round-about way to use default filters: pipe it through the standard filter before passing it to your custom filter and pass the original value as a parameter.

For example your Angular expression would look like this:

{{myDate | date: 'mediumDate' | relativeDate: myDate}}

And your filter:

var myApp = angular.module('myApp',[]);
myApp
    .filter('relativeDate', function() {
        return function(formattedDate, dateStr) {
            var returnVal = formattedDate,
                today = new Date(),
                evalDate = new Date(dateStr);
            if (today.getFullYear() == evalDate.getFullYear() &&
                today.getMonth() == evalDate.getMonth() &&
                today.getDate() == evalDate.getDate()) {
                    returnVal = 'Today'
            }
            return returnVal
        }
    })
    .controller('myAppCtrl', ['$scope', function myAppCntrl($scope) {
        $scope.myDate = "2001-01-01T01:01:01";
    });

Sajan Shakya · Accepted Answer · 2016-07-25 07:06:05Z

2

app.filter('linkifyStuff', function(sanitizeStuffFilter,prettifyStuffFilter) {
    return function(text) {

        return sanitizeStuffFilter(text) + ' whatever ' + prettifyStuffFilter(text);
    }
});

this didnt work out for me. if anyone has problem with the above code. you can try this which worked out for me pretty well.

app.filter('linkifyStuff', function($filter) {
        return function(text) {

            return $filter('sanitizeStuffFilter')(text) + ' whatever ' + $filter('prettifyStuffFilter')(text);
        }
    });

answered Jul 25, 2016 at 7:06

Sajan Shakya

211 bronze badge

1 Comment

Andreas Skagestad Over a year ago

Thanks. I had problems with the first suggestion as well, but this last code solved it for me also.

Himanshu Pathak · Accepted Answer · 2016-09-15 06:33:41Z

2

Latest way example:

angular.module('myApp.shared.shared-filters', [])
.filter('capitalize', ['$filter', function($filter) {
  return function(input) {
    return $filter('uppercase')(input.charAt(0)) + $filter('lowercase')(input.substr(1));
  }
}]);

answered Sep 15, 2016 at 6:33

Himanshu Pathak

1931 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to call one filter from another filter in angular.js

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related