CODEWITHSUNDEEP
javascriptangularjs
Nikita
Nikita

Reputation: 2943

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

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.

Upvotes: 41

Views: 21203

Answers (5)

Himanshu Pathak
Himanshu Pathak

Reputation: 193

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

Upvotes: 2

Sajan Shakya
Sajan Shakya

Reputation: 21

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

Upvotes: 2

Kevin Chung
Kevin Chung

Reputation: 137

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

Upvotes: 3

Khanh TO
Khanh TO

Reputation: 48972

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

Upvotes: 75

rjm226
rjm226

Reputation: 1203

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

Upvotes: 5

Related Questions