Angular JS: injetando um filtro em um controlador

Então, digamos que você refatorou uma $scopefunção em um filtro:

// 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;
};
});

Agora você pode apenas usá-lo em seu aplicativo de processamento de texto:

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

</span>

Mas agora outro de seus métodos está falhando:

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;
};

};

O método dependia da numChar()função que agora está fora do escopo. Como você volta ao verde o mais rápido possível?

Método um: injetando o filtro de volta no controlador, onde o método de falha é:

// 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;
};

}

Observe a convenção: o Filtersufixo é adicionado ao nome do filtro que se torna numCharFilter, e este é o nome que você usa dentro do seu método para acessar o filtro.

Método dois: injetando todo o $filterserviço em seu controlador:

// 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;
};

}

Isso permite que você chame todos os filtros, mas a notação se torna um pouco estranha.

Mas de uma forma ou de outra, você está de volta ao verde. É hora de pensar sobre sua refatoração. Talvez existam maneiras melhores.

Fontes: meu aplicativo , Stack Overflow e Angular Docs .

(Reeditado de uma postagem anterior )