<p></p>（私は<a href="http://fountainjs.io/" rel="nofollow">FountainJS</a>と私のシードプロジェクトを作成し、私は角JS、Webpacksとバベルを設定）私はAngualr JSでカスタムフィルタを作成しようとしている

Question

（FountainJS）のWebPACKを持つコンポーネントの角JSをフィルタリングするカスタム作成問題は、WebpacksでAngular JSのこのコンポーネントの方法でコードを書くという事実で、私はカスタムフィルタを設定する方法を知らないので、私はToddと同じような通常のフィルターのような別の関数を返す単純な関数のように作成しようとしましたMott here。

これは私のコンポーネントです。ここで

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 
}; 

私はコンソールでこのエラー

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 

はまた、このように試してみましたが、私は別のエラーを持ってもらうディレクティブとフィルタ

<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> 

との図である。

<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メソッドを使用してモジュールに登録するものです。 あなたがリンクしている記事の例は、それを明確に示しています。例えば

私は新しいフィルタを追加したい場合は、私はこのような何か：あなたはそれが.filterをモジュールにフィルタ機能を返す名前と機能を合格する必要が見ることができるように

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>

を方法。フィルターは複数回使用できるので、このようにする必要があります（そうしないと、コントローラーでデータを変換できるだけで、フィルターは必要ありません）。また、リターンフィルタが依存関係注入を利用できるようにする。