Angularjs custom filter

Question

I've built an app using angularjs and I want to use some custom filter. But when I inject it, I have this error "Error: Unknown provider". Here is the part of my code: this is my app:angular.module('myApp', ['filters']) and this is my filter:

angular.module('filters', [])
.filter('truncate', function () {
    return function (text, length, end) {
        if (isNaN(length))
            length = 10;

        if (end === undefined)
            end = "...";

        if (text.length <= length || text.length - end.length <= length) {
            return text;
        }
        else {
            return String(text).substring(0, length-end.length) + end;
        }

    };
});

And in my template: {{currentGroup.zk0201_nom | truncate:7}} This is the error:

Error: Unknown provider: truncateFilterProvider <- truncateFilter
    at Error (<anonymous>)
    at ...assets/js/angular/angular.js:2734:15
    at Object.getService [as get] (...assets/js/angular/angular.js:2862:39)
    at ...assets/js/angular/angular.js:2739:45
    at Object.getService [as get] (....assets/js/angular/angular.js:2862:39)
    at ...assets/js/angular/angular.js:9604:24
    at filter (...assets/js/angular/angular.js:6157:14)
    at _filterChain (...assets/js/angular/angular.js:6148:41)
    at statements (...assets/js/angular/angular.js:6124:25)
    at parser (...assets/js/angular/angular.js:6057:13)

is anyone can help me please? and I want to precise that all my directive and factory doesn't work too. Thanks in advance :)

Don't post it in comments. Edit your question, and paste it there. — JB Nizet
– JB Nizet, Commented Nov 16, 2013 at 15:27

noypi · Accepted Answer · 2014-07-22 03:02:58Z

I was doing something similar and it is working perfectly fine, something might be wrong somewhere else, below is how I do it:

complete code: http://noypi-linux.blogspot.com/2014/07/angularjs-filter-creating-custom-filter.html

var myapp = angular.module('MyFilterApp', []);
myapp.filter('myfilter', function() {
    return function(input, param1) {
    console.log("------------------------------------------------- begin dump of custom parameters");
    console.log("input=",input);
    console.log("param1(string)=", param1);
    var args = Array.prototype.slice.call(arguments);
    console.log("arguments=", args.length);
    if (3<=args.length) {
        console.log("param2(string)=", args[2]);
    }
    if (4<=args.length) {
        console.log("param3(bool)=", args[3]);
    }
    console.log("------------------------------------------------- end dump of custom parameters");

    // filter
    if (5<=args.length) {
        return window[args[4]](input);
    }

    return input;

    };
});

Nikos Paraskevopoulos · Accepted Answer · 2013-11-16 17:47:58Z

1

Make sure that the JS file is loaded AND that you declare the dependency on the filters module. E.g. if "app" is your main module, add "filters" in the declaration:

var app = angular.module("app", ["x", "y", "z", ..., "filters"]);

answered Nov 16, 2013 at 17:47

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Comments

meriadec · Accepted Answer · 2013-11-16 15:24:27Z

0

Are you sure your file for the filter module is loaded in your page ?

I tried your code on Plunkr and I dont have any error :

http://plnkr.co/edit/YpS9LvLeKZy62PgKNmlm?p=preview

answered Nov 16, 2013 at 15:24

meriadec

2,98321 silver badges20 bronze badges

1 Comment

user2964289 Over a year ago

yes, but I use Ajaxify and I think it causes the error. what do you think?

Matt · Accepted Answer · 2014-08-06 18:47:00Z

0

I ran into something similar with a custom filter I was working on. The solution I found was you need to prefix your custom filter in your HTML with "filter"

  filter: truncate: 7

answered Aug 6, 2014 at 18:47

Matt

531 silver badge9 bronze badges

Collectives™ on Stack Overflow

Angularjs custom filter

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related