ECMAScript6 AngularJS 过滤器

Posted 2023-02-22

【中文标题】ECMAScript6 AngularJS 过滤器

【英文标题】：ECMAScript6 AngularJS Filter

【发布时间】：2015-09-28 20:50:13

【问题描述】：

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

我是 ES6 和 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>

【问题讨论】：

根据您的评论，APP.filters 似乎未定义。

@POZ - 是的，它是在另一个文件中定义的，我只是在这种情况下显示了一个 sn-p 的主要内容：/

是的，我明白这一点。我要说的是：可能是您的库没有按正确的顺序加载吗？例如，我会将 angular script 标签放在 html 的末尾（外部脚本的最佳实践）。

@POZ - 所以在我的页面底部，我首先加载 Angular 脚本，然后是我的控制器和我的过滤器。我更想也许构造函数中的输入是未定义的 - 不确定

构造函数永远不应该return 任何东西（就像在 ES5 中一样）！

【参考方案1】：

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

【讨论】：

这是在ts还是es6中？

不是TS，是ES-2015 (ES6)

我不确定，但这会在每次调用该过滤器时创建一个新的 PassFilter 实例。换句话说，我认为这是解决这个问题的一种非常低效的方法。如果我错了，请纠正我。

【参考方案2】：

Angular 中的过滤器函数不采用class，而是采用filter factory function。 这意味着如果您使用 ES6，您可以使用 lambda（箭头函数）来实现过滤器。

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

【参考方案3】：

看来你想有单独的文件，所以：

// star.filter.js
export default function (input = '') 
  var split = input.split('');
  var result = "";
  for (var i = 0; i < split.length; i++) 
    result += "*";
  
  return result;


// star.module.js
import angular from 'angular';

import starFilter from './star.filter';

let starModule = angular.module('common.star', [])
  .filter('star', () => starFilter )
  .name;

export default starModule ;