Erstellen von benutzerdefinierten Filtern Angular JS in der Komponente mit Webpack (FountainJS)

Question

Ich versuche, einen benutzerdefinierten Filter in Angualr JS zu erstellen (Ich eröffne mein Saatgutprojekt mit FountainJS, habe ich Angular JS, Webpacks und Babel)

Die Problem ist, dass die Tatsache des Schreibens Code in dieser Komponente Weg in Angular JS mit Webpacks, ich weiß nicht, wie man einen benutzerdefinierten Filter einstellen, ich habe versucht, es wie eine einfache Funktion zu erstellen, die eine andere Funktion wie die normalen Filter zurückgibt, sagte Todd Mott here.

Nun, hier ist meine Komponente. Hier

class ContactsController{ 
    /** @ngInject */ 
    constructor($http) { 
    $http 
     .get('app/contacts/contacts.json') 
     .then(response => { 
     this.contacts = response.data; 
     }); 

    } 

    getContacts(){ 
    return this.contacts; 
    } 

    setFilterContacts(filter){ 
    this.filterSelected = filter; 
    } 

    getFilterContacts(){ 
    return this.filterSelected; 
    } 

    getContactsFiltered(){ 
    return function(){ 
     this.filter = getFilterContacts(); 
     if (this.filter === undefined){ 
     return this.getContacts(); 
     } 

     this.contactsFiltered = []; 
     this.contacts.forEach(function (item, index, array) { 
     if (item.name.startsWith(this.filter)){ 
      this.contactsFiltered.push(item); 
     }; 
     }); 

     return this.contactsFiltered; 
    }; 
    } 

} 

export const contacts = { 
    templateUrl: 'app/contacts/contacts.html', 
    controller: ContactsController 
}; 

ist die Ansicht mit der Richtlinie und dem Filter

<ul style="list-style-type: none; 
       margin: 0; 
       padding: 0; 
       overflow: hidden; 
       background-color: #333333;"> 
      <li style="float: left;"><button ng-click="$ctrl.setFilterContacts()">Todos</button></li> 
      <li style="float: left;"><button ng-click="$ctrl.setFilterContacts('j')">a</button></li> 
     </ul> 

     <intelico-contact ng-repeat="contact in $(ctrl.contacts | orderBy: 'name' | $ctrl.getContactsFiltered()" contact="contact"> 
     </intelico-contact> 

ich diesen Fehler in der Konsole

angular.js?3437:13708 Error: [$parse:syntax] Syntax Error: Token '.' is unexpected, expecting [)] at column 42 of the expression [($ctrl.contacts | orderBy: 'name' | $ctrl.getContactsFiltered())] starting at [.getContactsFiltered())]. 
      http://errors.angularjs.org/1.5.7/$parse/syntax?p0=.&p1=is%20unexpected%2C%20expecting%20%5B)%5D&p2=42&p3=(trl.contacts%20%7C%orderBy%3A%20'name'%20%7C%20%24ctrl.getContactsFiltered())&p4=.getContactsFiltered()) 
       at eval (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:68:12) 
       at Object.throwError (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14343:11) 
       at Object.consume (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14355:12) 
       at Object.primary (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14217:12) 
       at Object.unary (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14209:19) 
       at Object.multiplicative (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14196:21) 
       at Object.additive (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14187:21) 
       at Object.relational (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14178:21) 
       at Object.equality (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14169:21) 
       at Object.logicalAND (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14161:21)(anonymous function) @ angular.js?3437:13708(anonymous function) @ angular.js?3437:10347invokeLinkFn @ angular.js?3437:9816nodeLinkFn @ angular.js?3437:9215compositeLinkFn @ angular.js?3437:8510nodeLinkFn @ angular.js?3437:9210(anonymous function) @ angular.js?3437:9553processQueue @ angular.js?3437:16170(anonymous function) @ angular.js?3437:16186$eval @ angular.js?3437:17444$digest @ angular.js?3437:17257$apply @ angular.js?3437:17552done @ angular.js?3437:11697completeRequest @ angular.js?3437:11903requestLoaded @ angular.js?3437:11836 

Auch wie diese versucht, aber ich habe einen anderen Fehler:

<intelico-contact ng-repeat="contact in ($ctrl.getContactsFiltered() | orderBy: 'name')" contact="contact"></intelico-contact> 





     Error: [orderBy:notarray] Expected array but received: function() 
     http://errors.angularjs.org/1.5.7/orderBy/notarray?p0=function%20() 
      at eval (eval at <anonymous> (index.js:128), <anonymous>:68:12) 
      at eval (eval at <anonymous> (index.js:128), <anonymous>:21428:30) 
      at fn (eval at compile (eval at <anonymous> (index.js:128)), <anonymous>:4:374) 
      at regularInterceptedExpression (eval at <anonymous> (index.js:128), <anonymous>:15831:55) 
      at Scope.$digest (eval at <anonymous> (index.js:128), <anonymous>:17277:34) 
      at Scope.$apply (eval at <anonymous> (index.js:128), <anonymous>:17552:24) 
      at done (eval at <anonymous> (index.js:128), <anonymous>:11697:47) 
      at completeRequest (eval at <anonymous> (index.js:128), <anonymous>:11903:7) 
      at XMLHttpRequest.requestLoaded (eval at <anonymous> (index.js:128), <anonymous>:11836:9) 

Answer 1

Filter ist nicht etwas, das Sie von der Controller-Methode zurückgeben. Filter ist etwas, das Sie auf Modul mit .filter Methode registrieren. Beispiele im Artikel, den Sie verlinkt haben, zeigen das deutlich.

Zum Beispiel, wenn ich neue Filter hinzufügen Ich möchte etwas tun, wie folgt aus:

angular.module('app', []); 
 

 
angular.module('app').filter('onlyEvenTimes2',() => { 
 
    return values => values 
 
    .filter(value => value % 2 === 0) 
 
    .map(value => value * 2); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script> 
 

 
<div ng-app="app"> 
 
    {{ [1, 2, 3, 4, 6, 7, 8, 9, 10] | onlyEvenTimes2 }} 
 
</div>

Wie Sie es erforderlich, sehen Name und Funktion zu übergeben, die Filterfunktion zurückzukehren .filter zum Modul Methode. Es ist erforderlich, dies zu tun, da Filter kann und sollte mehrmals verwendet werden (sonst können Sie nur Ihre Daten in den Controller verwandeln, keine Notwendigkeit für Filter). Funktion auch, dass der Rückgabefilter die Abhängigkeitsinjektion nutzen kann.