Verwenden von Filtern Mit Direktiven in AngularJS

Ich versuche, die Verwendung von filtern innerhalb einer AngularJS-Direktive, aber nicht genau wissen, wie Sie dies tun. Von einigen info über die mailing-Liste scheint es, dass Sie sollten in der Lage sein, um zu injizieren, $filter, und verwenden Sie es, aber ich bin mir nicht sicher, wie/wo, um es aufzurufen.

Meine Richtlinie sieht derzeit ungefähr so 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 funktioniert nicht. Wie soll ich filter meine Daten in die Richtlinie?

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

InformationsquelleAutor jgm | 2013-02-28

  1. 14

    Erstellen Sie ein neues isolieren Anwendungsbereich der Richtlinie (scope: { 'fancyDisplay': '=' }), das bedeutet, dass Sie nicht in der Lage, access-Eigenschaften aus dem übergeordneten Bereich. Da tagFilter definiert ist, die auf den übergeordneten Bereich, werden Sie nicht in der Lage, darauf zuzugreifen.

    Pass tagFilter als Attribut der Richtlinie:

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

    Und über die Richtlinie:

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

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

    Hmm... wie würde ich das erweitern, dass mehrere Filter?
    Definieren Sie attrs: <div fancy-display="model.data" filter1="filter1" filter2="filter2"></div> und auf die Richtlinie scope: { fancyDisplay: '=', filter1: '=', filter2: '=' }. Hinweis: ich habe namens "filter1" und "filter2", aber man kann Sie nennen, was Sie wollen. Auch, wenn Sie beginnen, habend viele Filter, ich würde Ihnen empfehlen, pre-filter die ng-model Daten vor dem senden an die Richtlinie.
    Pre-filtering ist interessant, wie das ist, wo ich angefangen habe. Ich habe versucht, diese auf die Richtlinie selbst, aber es hat nicht funktioniert; wie kann ich das alter der Geige zu erreichen?
    Auf die Beobachter, fügen Sie so etwas wie: $scope.model.filteredData = $filter('filter')($scope.model.data, $scope.tagFilter); und auf der HTML: <div fancy-display="model.filteredData"></div> jsfiddle.net/bmleite/VDLqa/6 (Hinweis: vergessen Sie nicht, um zu injizieren, die $filter auf den controller).
    Fantastisch, vielen Dank

    InformationsquelleAutor bmleite

  2. 1

    Dank @bmleite für deine Antwort.

    Andere Sache, die hilfreich ist, um sicher zu deklarieren
    Ihre ng-repeat Direktive wie das incase Sie haben deplicates auf
    Ihre Liste.

    Es dauerte ewig, um dies herauszufinden. Anscheinend müssen Sie den filter
    vor der Angabe der track von x : 

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

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

});

    Dem inversen funktioniert nicht.

    InformationsquelleAutor dviramontes

Schreibe einen Kommentar