angularjs - 使用 TypeScript 创建自定义 Angular 过滤器

我正在尝试找出用 TypeScript 创建自定义 Angular 过滤器的最佳方法。

我看到的所有代码示例都使用类似于:

myModule.filter( "myFilter", function()
{
    return function( input )
    {
        //  filter stuff here
        return result;
    }
}

... 这可行，但看起来很乱，因为我想把所有的过滤器代码分开。因此，我想知道如何将过滤器声明为单独的文件（例如 filters/reverse-filter.ts），以便我可以像这样创建它：

myModule.filter( "filterName", moduleName.myFilter );

... 就像你对控制器、服务等所做的那样。

关于 TS 和 Angular 的文档似乎非常稀少，特别是在过滤器方面——有人能帮忙吗？

干杯！

答案＃1

函数可以这样从模块中导出：

module moduleName {
    export function myFilter()
    {
        return function(input)
        {
            //  filter stuff here
            return result;
        }
    }
}

然后在模块外：

myModule.filter("filterName", moduleName.myFilter);

那么就有可能通过遍历 moduleName 模块的公共属性来自动注册该模块中定义的所有过滤器。

答案＃2

也许有点晚，但对别人可能有用。

module dashboard.filters{

    export class TrustResource{

        static $inject:string[] = ['$sce'];

        static filter($sce:ng.ISCEService){

            return (value)=> {
                return $sce.trustAsResourceUrl(value)
            };
        }
    }
}     
    dashboard.Bootstrap.angular.filter('trustAsResourceUrl',dashboard.filters.TrustResource.filter);

解释最后一行：

dashboard.Bootstrap.angular.filter('trustAsResourceUrl',dashboard.filters.TrustResource.filter);)

我将添加一段代码，它代表我的 Bootstrap 类，这样你就可以理解它。

module dashboard {
    export class Bootstrap {

        static angular:ng.IModule;

        static start(){        
            Bootstrap.angular = angular.module('EmbApp', dashboard.Bootstrap.$inject);
        }


    }
}

//run application
dashboard.Bootstrap.start();

如果你需要更多关于它如何工作的的信息，你可以在这里查看我自己的 TypeScript/AngularJS/Less 结构