ECMAScript6 Filtro AngularJS

Question

Sto utilizzando ECMAScript6 in un progetto e sto provando a creare un filtro angolare. Di seguito è il mio tentativo, tuttavia sto ricevendo il seguente errore nella console: Impossibile impostare la proprietà 'PassFilter' di indefinito

Sono nuovo sia per ES6 che per Angolare. Ho dovuto eseguire il boot angolare in questo modo a causa di limiti legacy.

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>

Answer 1

funzione di filtro in angolare non prende class ma una filter factory function. Questo implica che se si utilizza ES6 è possibile utilizzare lambda (funzione freccia) per implementare il filtro.

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

Answer 2

Sono nuovo in Angular. Ho usato la classe per creare un filtro in 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); 

in html

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

Answer 3

Sembra che si desidera avere file separati, in modo da:

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