Angular JS: Injecting a Filter in a Controller

So, let's say you refactored a $scope function into a filter:

// Counts char number excluding spaces. Three dots count as one.
// TODO: refactor text transformation in a separate filter
editor.filter("numChar", function() {
    return function(theText) {
        return theText
            .replace(/\n/g, "")
            .replace(/\.\.\./g,"\u2026")
            .length; 
    };
});

Now you can just use it in your text processing application:

<span class="char-num" id="numChar">
    {{data.myText | numChar}}
</span>

But now another of your methods is failing:

function ReportController($scope, Data) {

    // The text is valid if its length is less or equal to maxChar
    $scope.isValid = function() {
        var numCh = $scope.numChar(); // OUCH! What now?!?
        return numCh <= Data.maxChar; 
    }; 

}; 

The method relied on the numChar() function which is now out of scope. How do you get back to green as soon as possible?

Method one: by injecting the filter back into the controller where the failing method is:

// Inject numChar Filter into Report Controller
function ReportController($scope, Data, numCharFilter) {

  $scope.isValid = function() {
        // Call the filter directly (name + filter)
        var numCh = numCharFilter($scope.data.myText);
        return numCh <= Data.maxChar;
   };

}

Notice the convention: the Filter suffix is added to the filter name which becomes numCharFilter, and this is the name that you use inside your method to access the filter.

Method two: by injecting the whole $filter service in your controller:

// Inject $filter into Report Controller
function ReportController($scope, Data, $filter) {

    $scope.isValid = function() {
        // Call the desired filter by selecting it from $filter
        var numCh = $filter("numChar")($scope.data.myText); // <- meh
        return numCh <= Data.maxChar;
    };

}

This allows you to call every filter, but the notation becomes a little awkward.

But one way or the other, you're now back to green. Time to think about your refactoring. Maybe there are better ways.

Sources: my app, Stack Overflow and Angular Docs.

(Re-edited from a previous post)