使用TypeScript创建自定义角度过滤器

Question

我正在尝试使用TypeScript创建自定义角度过滤器的最佳方法.

我看到的所有代码示例都使用如下代码:

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

...有效,但似乎很乱,因为我想保持所有的过滤器代码分开.所以我想知道如何将过滤器声明为一个单独的文件(例如filters/reverse-filter.ts),所以我可以创建它:

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

......与控制器,服务等相同.

TS和Angular的文档在实际上看起来相当薄弱,特别是在过滤器方面 - 任何人都可以帮忙吗？

干杯!

Answer 1

可以从以下模块导出函数:

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

然后在模块之外:

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

然后,可以moduleName通过迭代其公共属性来自动注册模块中定义的所有过滤器.

Answer 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结构