Angularjs 如何用Typescript实现过滤器?

Angularjs 如何用Typescript实现过滤器?,angularjs,typescript,angular-filters,Angularjs,Typescript,Angular Filters,我有这个过滤器: module App.Filters { export class LabelCase implements ng.IFilterService { static $inject = ['$filter']; public static factory(): Function { return (input: string) => { input = input.replace

我有这个过滤器:

module App.Filters {
    export class LabelCase implements ng.IFilterService {
        static $inject = ['$filter'];

        public static factory(): Function {
           return (input: string) => {
                input = input.replace(/(A-Z)/g, '$1');
                return input[0].toUpperCase() + input.slice(1);
            }
        }
    }
}
这是app.js中的注册信息

this.app.filter("labelCase", () => App.Filters.LabelCase.factory);
这给了我一个错误

我做错了什么

Error: [$injector:unpr] http://errors.angularjs.org/1.2.23/$injector/unpr?p0=lableCaseFilterProvider%20%3C-%20lableCaseFilter
x/<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:6:443
gc/l.$injector<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:36:196
c@http://localhost:2861/Scripts/vendors/angular/angular.min.js:34:300
gc/p.$injector<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:36:266
c@http://localhost:2861/Scripts/vendors/angular/angular.min.js:34:300
mc/this.$get</<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:124:325
db.prototype.filter@http://localhost:2861/Scripts/vendors/angular/angular.min.js:171:352
db.prototype.filterChain@http://localhost:2861/Scripts/vendors/angular/angular.min.js:171:257
db.prototype.statements@http://localhost:2861/Scripts/vendors/angular/angular.min.js:171:1
db.prototype.parse@http://localhost:2861/Scripts/vendors/angular/angular.min.js:167:470
Yd/this.$get</<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:99:13
f@http://localhost:2861/Scripts/vendors/angular/angular.min.js:80:39
x@http://localhost:2861/Scripts/vendors/angular/angular.min.js:62:8
ea@http://localhost:2861/Scripts/vendors/angular/angular.min.js:49:421
K@http://localhost:2861/Scripts/vendors/angular/angular.min.js:47:344
K@http://localhost:2861/Scripts/vendors/angular/angular.min.js:48:40
w@http://localhost:2861/Scripts/vendors/angular/angular.min.js:46:124
F@http://localhost:2861/Scripts/vendors/angular/angular.min.js:56:187
K@http://localhost:2861/Scripts/vendors/angular/angular.min.js:47:373
K@http://localhost:2861/Scripts/vendors/angular/angular.min.js:48:40
K@http://localhost:2861/Scripts/vendors/angular/angular.min.js:48:40
K@http://localhost:2861/Scripts/vendors/angular/angular.min.js:48:40
K@http://localhost:2861/Scripts/vendors/angular/angular.min.js:48:40
w@http://localhost:2861/Scripts/vendors/angular/angular.min.js:46:124
z/<.link@http://localhost:2861/Scripts/vendors/angular/angular-route.min.js:7:202
O@http://localhost:2861/Scripts/vendors/angular/angular.min.js:54:392
g@http://localhost:2861/Scripts/vendors/angular/angular.min.js:47:256
w/<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:46:374
W/<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:48:215
L@http://localhost:2861/Scripts/vendors/angular/angular.min.js:52:40
v@http://localhost:2861/Scripts/vendors/angular/angular-route.min.js:6:355
Zd/this.$get</k.prototype.$broadcast@http://localhost:2861/Scripts/vendors/angular/angular.min.js:114:322
l/<@http://localhost:2861/Scripts/vendors/angular/angular-route.min.js:11:177
ye/e/l.promise.then/L@http://localhost:2861/Scripts/vendors/angular/angular.min.js:100:167
ye/e/l.promise.then/L@http://localhost:2861/Scripts/vendors/angular/angular.min.js:100:167
ye/f/<.then/<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:101:340
Zd/this.$get</k.prototype.$eval@http://localhost:2861/Scripts/vendors/angular/angular.min.js:112:57
Zd/this.$get</k.prototype.$digest@http://localhost:2861/Scripts/vendors/angular/angular.min.js:109:139
Zd/this.$get</k.prototype.$apply@http://localhost:2861/Scripts/vendors/angular/angular.min.js:112:396
h@http://localhost:2861/Scripts/vendors/angular/angular.min.js:72:441
v@http://localhost:2861/Scripts/vendors/angular/angular.min.js:77:463
we/</w.onreadystatechange@http://localhost:2861/Scripts/vendors/angular/angular.min.js:79:24
错误:[$injector:unpr]http://errors.angularjs.org/1.2.23/$injector/unpr?p0=LableCaseFilter提供程序%20%3C-%20lableCaseFilter
x/您在HTML中拼错了“label”:

{{field}标签库}

应该是


{{field | labelCase}}

以下是我如何在typescript中编写过滤器

  module portal{

   export var app = angular.module("demo", []);
              app.filter(filters);

 }


module portal.filters{

export class fromNow{

    constructor(){

        return function(date){
            return moment(date).fromNow();//return anything m using moment.js
        }


    }
  }


}

您正在注册一个函数,该函数返回一个函数,该函数返回一个函数--您的意思是减少一个间接级别吗?还有,是什么错误?@RyanCavanaugh抱歉地编辑了这个问题。很抱歉,我从来没有使用过typescript,我只是在学习它。你有没有在一些没有发布在这里的代码中键入“labelCaseFilterProvider”而不是“labelCaseFilterProvider”?我没有这样的类。就像Ryan已经建议的那样,你可能应该直接传递工厂方法,而不是将其包装在另一个函数中:
this.app.filter(“labelCase”),App.Filters.LabelCase.factory)
  module portal{

   export var app = angular.module("demo", []);
              app.filter(filters);

 }


module portal.filters{

export class fromNow{

    constructor(){

        return function(date){
            return moment(date).fromNow();//return anything m using moment.js
        }


    }
  }


}