Verwenden von Filtern mit Direktiven in AngularJS

Ich versuche, Filter innerhalb einer AngularJS-Direktive zu verwenden, bin mir aber nicht sicher, wie das genau geht. Aus einigen Informationen auf der Mailing-Liste scheint es, dass Sie in der Lage sein sollten, $ filter zu injizieren und zu benutzen, aber ich bin mir nicht sicher, wie/wo ich es aufrufen soll.Verwenden von Filtern mit Direktiven in AngularJS

Meine Richtlinie sieht derzeit wie folgt aus:

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

Obwohl die filter:tagFilter nicht funktioniert. Wie sollte ich meine Daten in der Richtlinie filtern?

JSfiddle verfügbar unter http://jsfiddle.net/VDLqa/4/ Vielen Dank im Voraus für alle Antworten.

Quelle

2013-02-28 jgm

Sie erstellen einen neuen isolate-Bereich für die Direktive (scope: { 'fancyDisplay': '=' }). Dies bedeutet, dass Sie nicht auf Eigenschaften aus dem übergeordneten Bereich zugreifen können. Da tagFilter im übergeordneten Bereich definiert ist, können Sie nicht darauf zugreifen.

Pass tagFilter als Attribut der Richtlinie:

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

Und auf der Richtlinie:

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

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

Quelle

2013-02-28 14:49:48 bmleite

Hmm ... wie würde ich das auf mehrere Filter erweitern? – jgm

Definiere mehr attrs: '

' und auf die Direktive 'scope: {fancyDisplay: '=', filter1: '=', filter2: '='}'. Hinweis: Ich habe sie "Filter1" und "Filter2" genannt, aber Sie können sie nennen, was Sie wollen. Wenn Sie viele Filter verwenden, würde ich Ihnen empfehlen, die 'ng-Modell'-Daten vorzufiltern, bevor Sie sie an die Direktive senden. – bmleite

Vorfilterung ist interessant, da habe ich angefangen. Ich habe dies an der Richtlinie selbst versucht, aber es hat nicht funktioniert. Wie würde ich die Geige verändern, um das zu erreichen? – jgm

Vielen Dank für Ihre Antwort auf @bmleite.

Eine andere Sache, die hilfreich sein könnte, ist sicherzustellen, dass Ihre ng-repeat-Anweisung wie diese in Ihrer Liste zu deklarieren.

Es dauerte mich für immer, um dies herauszufinden. Anscheinend müssen Sie filtern, bevor Sie die Spur von x angeben:

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

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

});

Die inverse funktioniert nicht.

Quelle

2014-01-31 01:08:29 dviramontes

Verwenden von Filtern mit Direktiven in AngularJS

Antwort

Verwandte Themen