使用 Webpack (FountainJS) 在组件中创建自定义过滤器 Angular JS

Question

我正在尝试在 Angular JS 中创建一个自定义过滤器（我使用 FountainJS 创建我的种子项目，我设置了 Angular JS、Webpacks 和 Babel）

问题在于，在 Angular JS 中使用 Webpacks 以这种组件方式编写代码，我不知道如何设置自定义过滤器，我试图创建它像一个简单的函数一样返回另一个函数，就像正常过滤器如 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
};

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

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

我在控制台中收到此错误

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

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

<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 方法在模块上注册的东西。 您链接的文章中的示例清楚地表明了这一点。

例如，如果我想添加新过滤器，我会这样做：

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>

如您所见，它需要将返回过滤器函数的名称和函数传递给模块.filter 方法。必须这样做，因为过滤器可以而且应该多次使用（否则您可以只在控制器中转换数据，不需要过滤器）。返回过滤器的功能也可以利用依赖注入。