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

Answer 1

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>');
        }
    };
})

Answer 2

@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";
    });

Answer 3

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);
        }
    });

Answer 4

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

Answer 5

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));
  }
}]);