2

I'm new, meaning this is my first hour with AngularJS. I'm trying to get a hang of writing custom filters, and here is my first one:

http://jsfiddle.net/rutwick/UJTdb/

angular.module('myfilters', []).
filter('addon', function(){
        alert('here');
        return function(ip){
            return ip+'-suffix';
        }
    });
angular.module('myapp', ['myfilters']);

If I try using it like so:

<input type="text" ng-model="sometext" />
<h1>{{ sometext | addon }}</h1>

I get a whole lotta errors. So I use it like this:

<input type="text" ng-model="sometext" />
<h1>{{ sometext | filter:addon }}</h1>

No errors, but it doesn't work. The alert doesn't pop. Am I missing something here?

Errors:

Error: Unknown provider: addonFilterProvider <- addonFilter
at Error (<anonymous>)...blah blah file path
12
  • what are the errors ? Is there a plunker somewhere? Commented Jul 26, 2013 at 14:26
  • Check now, I've added the error. Commented Jul 26, 2013 at 14:28
  • You need to register your filter with your app. Is "angular" your application name? Commented Jul 26, 2013 at 14:30
  • Works like it should for me: plnkr.co/edit/0PkNAMXdPBp6jVnpns5U?p=preview Commented Jul 26, 2013 at 14:31
  • Here's my entire code: jsfiddle.net/rutwick/UJTdb Commented Jul 26, 2013 at 14:33

2 Answers 2

2

See updated variant here http://jsfiddle.net/UJTdb/6/

Basic idea was to set <body ng-app="myapp">

Also I changed a filter function:

filter('addon', function(){
        alert('here');
        return function(ip){
            return ip || '' +'-suffix';
        }
    });
Sign up to request clarification or add additional context in comments.

Comments

1
<body ng-app="myapp">

does the trick! :D

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.