Uso dei filtri con le direttive in AngularJS

Question

Sto tentando di utilizzare i filtri all'interno di una direttiva AngularJS ma non sono sicuro di come farlo. Da alcune informazioni sulla mailing list sembra che dovresti essere in grado di iniettare $ filter e usarlo, ma non sono sicuro di come/dove richiamarlo.

mia direttiva attualmente si presenta così:

myApp.directive('fancyDisplay', ['$filter', function($filter) { 
    return { 
     scope: { 
      'fancyDisplay': '=' 
     }, 
     template: "<div ng-repeat='datum in fancyDisplay | filter:tagFilter'>{{datum.name}}</div>" 
    }; 
}]); 

Anche se il filter:tagFilter non funziona. Come devo filtrare i miei dati nella direttiva?

JSfiddle disponibile al http://jsfiddle.net/VDLqa/4/ Grazie in anticipo per eventuali risposte.

Answer 1

Si sta creando un nuovo ambito isolato sulla direttiva (scope: { 'fancyDisplay': '=' }), il che significa che non sarà possibile accedere alle proprietà dall'ambito principale. Poiché lo tagFilter è definito nell'ambito genitore, non potrai accedervi.

Passo tagFilter come un attributo della direttiva:

<div fancy-display="model.data" filter="tagFilter"></div> 

E sulla direttiva:

scope: { 
    fancyDisplay: '=', 
    tagFilter: '=filter' 
}, 

jsfiddle: http://jsfiddle.net/bmleite/VDLqa/5/

Answer 2

Grazie a @bmleite per la risposta.

Un'altra cosa che potrebbe essere utile è assicurarsi di dichiarare la tua direttiva ng-repeat come questa nel caso in cui tu abbia deplicato su il tuo elenco.

Mi ci è voluto un giorno per capirlo. A quanto pare è necessario filtrare prima di specificare la pista da x:

app.directive("someDirective", function(){ ... 

    restrict: "E", 
    ... 
    template:"<ul ng-repeat='t in tree | filter:key track by $index'><li>{{t}}</li></ul>", 

}); 

L'inverso non funziona.