ECMAScript6 AngularJS过滤器

问题描述

我正在项目中使用ECMAScript6，我正在尝试创建一个角度过滤器。下面是我的尝试，但是我在控制台中收到以下错误：
无法设置未定义的属性'PassFilter'

I am using ECMAScript6 in a project and am trying to create an Angular Filter. Below is my attempt, however I am getting the following error in the console:Cannot set property 'PassFilter' of undefined

我是ES6和角。由于传统的限制，我不得不以这种方式引导角度。

I am new to both ES6 and Angular. I had to bootstrap angular that way due to legacy limitations.

myAngularModule = angular.module("MyModule");

angular.element(document).ready(function() {
  var myDiv = $("#myAngularDiv");
  angular.bootstrap(myDiv, ["MyModule"]);
});

myAngularModule.filter('PassFilter', APP.filters.PassFilter);



/* Filter is in a separate file: */
class PassFilter {

  constructor(input) {

    var split = input.split('');
    var result = "";
    for (var i = 0; i < split.length; i++) {
      result += "*";
    }
    return result;

  }
}

APP.filters.PassFilter = PassFilter;

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

<div id="myAngularDiv">
  <input type="password" ng-model="password">
  <span>{{password | PassFilter}}</span>
</div>

推荐答案

Angular中的过滤器功能不需要类但是过滤器工厂函数 。
这意味着如果你使用的是ES6，你可以使用lambda（箭头函数）来实现过滤器。

Filter function in Angular does not take a class but a filter factory function.This implies if you are using ES6 you can use lambda's (arrow function) to implement the filter.

myAngularModule.filter('PassFilter', ()=> {
   return (input)=> {
      var split = input.split('');
      var result = "";
      for (var i = 0; i < split.length; i++) {
       result += "*";
      }
      return result;
   }
});

这篇关于ECMAScript6 AngularJS过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！