Creating a custom Angular filter with TypeScript
Functions can be exported from modules like this:
module moduleName { export function myFilter() { return function(input) { // filter stuff here return result; } }}
then outside the module:
myModule.filter("filterName", moduleName.myFilter);
Then it would then be possible to do things like automatically register all of the filters defined in the moduleName
module by iterating over its public properties.
Maybe too late but can be useful for someone else.
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);
To explain the last line:
dashboard.Bootstrap.angular.filter('trustAsResourceUrl',dashboard.filters.TrustResource.filter);)
I will add a piece of code, wich represents my Bootstrap class, so you can understand it.
module dashboard { export class Bootstrap { static angular:ng.IModule; static start(){ Bootstrap.angular = angular.module('EmbApp', dashboard.Bootstrap.$inject); } }}//run applicationdashboard.Bootstrap.start();
If you need more information about how it works, you can checkout my own TypeScript/AngularJS/Less structure here
Here's an example using the injector to get dependencies into your filter. This one gets injected with the $filter service.
export class CustomDateFilter { public static Factory() { var factoryFunction = ($filter: ng.IFilterService) => { var angularDateFilter = $filter('date'); return (theDate: string) => { return angularDateFilter(theDate, "yyyy MM dd - hh:mm a"); }; }; factoryFunction.$inject = ['$filter']; return factoryFunction; }}// and in the bootstrap code:app.filter('customDate', your.module.CustomDateFilter.Factory());