javascript - ECMAScript6 AngularJS 过滤器

标签 javascript angularjs ecmascript-6 angularjs-filter

我在一个项目中使用 ECMAScript6 并试图创建一个 Angular Filter。以下是我的尝试,但是我在控制台中收到以下错误: 无法设置未定义的属性“PassFilter”

我是 ES6 和 Angular 的新手。由于遗留限制,我不得不以这种方式引导 Angular 。

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 的新手。我使用类在 Angular 中创建过滤器。

class PassFilter{
  constructor(input){
    this.input = input;
  }

  myMethod() {
    let input = this.input;

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

    return result;
  }

  static PassFilterFactory(input){
    let filter = new PassFilter(input);
    return filter.myMethod();
  }
}

PassFilter.PassFilterFactory.$inject = ['input'];

angular.module('myAngularModule', [])
  .filter('passFilter', () => PassFilter.PassFilterFactory);

在 html 中

<span>{{password | passFilter}}</span>

关于javascript - ECMAScript6 AngularJS 过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31335099/

相关文章:

javascript - 对如何使用新版本的 Waypoints(带或不带 jQuery)感到困惑

javascript - 论坛标题网络抓取工具

javascript - Angular ngIf + Bootstrap 行 : content of last div gets nested in previous div or is not rendered

angularjs - Angular UI-Routing,页面刷新时自动重定向到父状态

javascript - Angularjs 和 Google map API

javascript - 我如何推迟像 jquery Deferred 这样的 ES6 promise?

javascript - () => className 在 Javascript ES6 中意味着什么?

javascript - 使用 jQuery Mobile 选择作为菜单更改 URL 或内部页面

javascript - 如何使用dojo.number.round实现整数的toFixed功能?

javascript - 创建动态 tr 时,javascript 模板解析未定义