AngularJS - $ filtro non è definito

Question

Sto cercando di iniettare un filtro nella mia controller e usarlo come tale:

angular 
    .module('graduateCalculator', []) 
     .filter('slug', function() { 
       return function(input) { 
        if(input) { 
         return input.toLowerCase().replace(/[^a-z-]/g, '-'); 
        } 
       }; 
     }).controller('GraduateCalculatorController', ['$filter', app.graduateCalculator($filter)]); 

Tuttavia, ottengo l'errore di cui sopra. Ovviamente sto facendo qualcosa di molto sbagliato - semplicemente non abbastanza ovvio per me.

Uncaught ReferenceError: $filter is not defined 

Potrebbe avere qualcosa a che fare con la mia funzione. È scritto così:

var app = { 

    graduateCalculator: function($filter) { 
     window.console.log($filter('slug')('A random looking string...')); 
    } 

}; 

Aiuto apprezzato!

Answer 1

Il secondo parametro da [module].controller è una funzione di costruzione, non chiamare la funzione di costruzione ...

// change this... 
.controller('GraduateCalculatorController', ['$filter', app.graduateCalculator($filter)]); 
// to this... 
.controller('GraduateCalculatorController', ['$filter', app.graduateCalculator]); 

Answer 2

si dovrebbe avvolgere il contorller con una funzione

angular.module('graduateCalculator', []) 
    .filter('slug', function() { 
      return function(input) { 
       if(input) { 
        return input.toLowerCase().replace(/[^a-z-]/g, '-'); 
       } 
      }; 
    }) 
    .controller('GraduateCalculatorController', ['$filter', function($filter) { 
     app.graduateCalculator($filter) 
    }]); 

Answer 3

penso che accada di errore quando si prova a definire un controller e inserisci $filter nel tuo app.graduateCalculator($filter).

Con questo modo si richiama la funzione app.graduateCalculator($filter). Ma l'interprete js non sapeva cosa sia $filter, quindi ha gettato l'eccezione.

Basta aggiornare il controller in questo,

.controller('GraduateCalculatorController', ['$filter', app.graduateCalculator]); 

E assicurarsi che il proprio graduateCalculator hanno il parametro $filter.

Answer 4

La funzione del controller (per cui al momento è presente una chiamata di funzione, anziché una funzione di callback) deve essere una funzione che richiede $ scope (i controller richiedono $ scope), contenente anche $ filter.

controller('GraduateCalculatorController', ['$scope', '$filter', function($scope, $filter){<your code here>}]); 

Esistono, tuttavia, due modi per utilizzare il filtro. È possibile iniettare filtro $ e chiamare

$filter('slug')(inputStuff) 

o si può iniettare slugFilter e basta chiamare direttamente

slugFilter(inputStuff) 

Una delle lamentele più comuni circa angolare è i messaggi di errore, e questo sembra essere il problema qui!

Se non ero abbastanza chiaro su qualcosa fammelo sapere e farò del mio meglio per aiutare.