ECMAScript6 AngularJS Filter

Question

Ich verwende ECMAScript6 in einem Projekt und versuche, ein Angular Filter zu erstellen. Unten ist mein Versuch, aber ich bekomme den folgenden Fehler in der Konsole: Kann die Eigenschaft 'PassFilter' von undefined nicht setzen

Ich bin neu zu beiden ES6 und Angular. Ich musste auf Grund von Legacy-Beschränkungen auf diese Weise Bootstrap machen.

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

Filterfunktion in Angular dauert nicht ein class sondern ein filter factory function. Dies bedeutet, wenn Sie ES6 verwenden, können Sie Lambdas (Pfeilfunktion) verwenden, um den Filter zu implementieren.

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

Answer 2

Ich bin neu in Angular. Ich habe Klasse verwendet, um Filter in Angular zu erstellen.

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

Es scheint, dass Sie einzelne Dateien haben wollen, so:

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