How can I access and test an AngularJS filter from the browser console?
angularjs, angularjs-filter, angularjs-service
Solution
Filters can be called in HTML template binding {{myString | capitalize}}, but to gain access to it in the browser we have an excellent option. Consider this:
`$filter('filter')(array, expression, comparator)` per Angular $filter documentation
Realizing a filter can be called via the`$filter` service, you can thus access, call and test the `capitalize` filter this way:
`angular.element(document.body).injector().get('$filter')('capitalize')('capitalization test')`
The result in the console? `"Capitalization Test"`
What about a filter with more than one input? Just add the parameter, for instance if the `capitalize` filter had a second boolean parameter to restrict capitalization to the first word only:
`angular.element(document.body).injector().get('$filter')('capitalize')('capitalization test', true)`
OR
`angular.element(document.body).injector().get('$filter')('capitalize').apply(null, ['capitalization test', true])`
Kudos to this SO article and related blog entries for posting on accessing services from the console: access service from console.
Problem
Given a test filter, say this 'capitalize' filter that will capitalize the first letter of each word: ``` return function (input) { return (!!input) ? input.replace(/([^\W_]+[^\s-]*) */g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); }) : ''; } ``` How can this filter be tested from a browser's JavaScript console?