ECMAScript6 AngularJS 过滤器
ECMAScript6 AngularJS Filter
我在一个项目中使用 ECMAScript6 并试图创建一个 Angular 过滤器。以下是我的尝试,但是我在控制台中收到以下错误:
无法设置未定义的 属性 'PassFilter'
我是 ES6 和 Angular 的新手。由于遗留限制,我不得不 bootstrap 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>
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;
}
});
我是 Angular 的新人。我使用 class 在 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>
您似乎想要单独的文件,所以:
// 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 ;
我在一个项目中使用 ECMAScript6 并试图创建一个 Angular 过滤器。以下是我的尝试,但是我在控制台中收到以下错误: 无法设置未定义的 属性 'PassFilter'
我是 ES6 和 Angular 的新手。由于遗留限制,我不得不 bootstrap 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>
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;
}
});
我是 Angular 的新人。我使用 class 在 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>
您似乎想要单独的文件,所以:
// 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 ;