How can I access and test an AngularJS filter from the browser console?

Question

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?

Mindimindless

Answer 1

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.

Mindimindless

This will only work if debug mode is enabled. If it is disabled, you can do angular.reloadWithDebugInfo(). – Shanty

@Mindimindless Thanks a lot for this.It really saved a lot of my time and was such an easy tip. – Elliott

@Elliott My pleasure! Glad you found it helpful. – Mindimindless