Angularjs 使用网页包（喷泉）在组件中创建自定义过滤器

我正在尝试用AngualrJS创建一个自定义过滤器（我创建种子项目，设置AngularJS、Webpacks和Babel）

问题是，在Angular JS中用Webpack以这种组件方式编写代码，我不知道如何设置自定义过滤器，我试图创建一个简单的函数，返回另一个函数，如Todd Mott所说的普通过滤器

这是我的部件

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

这是带有指令和过滤器的视图

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

待办事项
a

我在控制台中得到这个错误

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

angular.js？3437:13708错误：[$parse:syntax]语法错误：标记“.”意外，应在表达式的第42列处[（$ctrl.contacts | orderBy:'name'|$ctrl.getContactsFiltered（））]从[.getContactsFiltered（）开始]。
http://errors.angularjs.org/1.5.7/$parse/syntax？p0=。&p1=是%20意外的%2C%20预期的%20%5B）%5D&p2=42&p3=（trl.contacts%20%7C%orderBy%3A%20'名称“%20%7C%20%24ctrl.getContactsFiltered（））&p4=.getContactsFiltered（））
在评估时（评估时）(http://localhost:3000/index.js:128:2), :68:12)
在目标位置。投掷者（评估在(http://localhost:3000/index.js:128:2), :14343:11)
在Object.consume（评估在(http://localhost:3000/index.js:128:2), :14355:12)
在Object.primary（评估在(http://localhost:3000/index.js:128:2), :14217:12)
at Object.1元（eval at）(http://localhost:3000/index.js:128:2), :14209:19)
at Object.乘法（eval at(http://localhost:3000/index.js:128:2), :14196:21)
at Object.additive（eval at(http://localhost:3000/index.js:128:2), :14187:21)
at Object.relational（eval at(http://localhost:3000/index.js:128:2), :14178:21)
at Object.equality（eval at(http://localhost:3000/index.js:128:2), :14169:21)
at Object.logicalAND（eval at(http://localhost:3000/index.js:128:2)，：14161:21）（匿名函数）@angular.js？3437:13708（匿名函数）@angular.js？3437:10347invokeLinkFn@angular.js？3437:9816nodeLinkFn@angular.js？3437:9215复合elinkfn@angular.js？3437:8510nodeLinkFn@angular.js？3437:9210（匿名函数）@angular.js？3437:9553processQueue@angular.js？3437:16170（匿名函数）@angular.js？3437:16186$eval@angular.js？3437:17444$digest@angular.js？3437:17257$apply@angular.js？3437:17552done@angular.js？3437:11697completeRequestRequestLoaded@angular.js？3437:11836

也尝试过这样做，但我有另一个错误：

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

错误：[orderBy:notarray]应为数组，但收到：函数（）
http://errors.angularjs.org/1.5.7/orderBy/notarray?p0=function%20()
评估时（评估时（索引js:128），：68:12）
评估时（评估时（索引：128），：21428:30）
在fn（编译时的eval（eval at（index.js:128）），：4:374）
at正则表达式（eval at（index.js:128），：15831:55）
在范围内。$digest（eval at（index.js:128），：17277:34）
在范围内。$apply（评估时间（索引：128），：17552:24）
完成时（评估时（索引：128），：11697:47）
在完成任务时（在（index.js:128），：11903:7评估）
在XMLHttpRequest.requestLoaded（eval at（index.js:128），：11836:9）

过滤器不是从控制器方法返回的东西。 过滤器是使用

.Filter

方法在模块上注册的东西。 文章中您链接的示例清楚地表明了这一点

例如，如果我想添加新过滤器，我会执行以下操作：

angular.module（'app'，[]）；
angular.module（'app'）.filter（'onlyEvenTimes2'，（）=>{
返回值=>值
.filter（值=>值%2==0）
.map（值=>值*2）；
});

{[1,2,3,4,6,7,8,9,10]|仅限通风设备2}
是的，但是我在Angular中像“components”一样编码，而Angular中的语法和编写代码的方式有一点变化，看看这个：你错了，没有类似component的过滤器。你应该学会区别。组件、过滤器、服务等具有不同的用例。您不能也不应该尝试使用像golden hamer这样的组件。