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)
Written by DeK
Related protips
1 Response
what if the filter contains 2 arguments? foe example here is my filter that splits email id and extracts username when specified index:
app.filter('split', function() {
return function(input, splitChar, splitIndex) {
return input.split(splitChar)[splitIndex];
}
});
In the views i can use it with {{signup.email|split:'@':0}}.
How do i use it inside controller according to your method, since my filter contains 2 arguments.
Have a fresh tip? Share with Coderwall community!
