ECMAScript6 AngularJS Süzgeç

Question

Bir projede ECMAScript6 kullanıyorum ve bir Açısal Filtre oluşturmaya çalışıyorum. Aşağıda benim girişimi, ancak konsolda aşağıdaki hatayı alıyorum: undefined özelliği 'PassFilter' özelliği ayarlanamıyor

Hem ES6 hem de Angular için yeniyim. Eski sınırlamalar nedeniyle bu şekilde açılıyorum. Açısal içinde

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

Filtre işlevi class ama filter factory function almaz. Bu, ES6 kullanıyorsanız, filtreyi uygulamak için lambda'yı (ok işlevi) kullanabilirsiniz.

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

Answer 2

Ben Açısal yeni duyuyorum. Açısal'da filtre oluşturmak için sınıf kullandım. html

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

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

Answer 3

O kadar, sen ayrı dosyalar istiyorum görünüyor:

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