ECMAScript6 Bộ lọc AngularJS

Question

Tôi đang sử dụng ECMAScript6 trong một dự án và đang cố gắng tạo Bộ lọc góc. Dưới đây là nỗ lực của tôi, tuy nhiên tôi nhận được lỗi sau trong bảng điều khiển: Không thể đặt thuộc tính 'PassFilter' không xác định

Tôi mới dùng cho cả ES6 và Góc. Tôi đã phải khởi động góc như vậy do hạn chế di sản.

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

chức năng lọc trong góc không mất một class nhưng một filter factory function. Điều này ngụ ý nếu bạn đang sử dụng ES6, bạn có thể sử dụng hàm lambda (chức năng mũi tên) để triển khai bộ lọc.

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

Answer 2

Tôi mới ở Góc. Tôi đã sử dụng lớp để tạo bộ lọc trong Góc.

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

trong html

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

Answer 3

Có vẻ như bạn muốn có tập tin riêng biệt, vì vậy:

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