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

Answer 3

以下是使用注入器获取依赖关系到筛选器的示例。这个注入了$ filter服务。

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());

Answer 4

您应该使用类似的东西来注入依赖项

:url =>':s3_domain_url'

Answer 5

您可以使用带有静态函数的类创建过滤器。

class PhoneBook : NSViewController {

    struct Contact {
       let name: String
       let number: String
    }

    let names = ["Gopal","Harish","Krishna","Ramu"]
    let numbers = ["468648","586385","5868544","354333"]

    override func loadView() {
        var model: [Contact] = []
        for index in 0..<names.count
        {
            model.append(Contact(name: names[index], number: numbers[index]))
        } 
    }
}

使用以下方法在控制器中使用此过滤器。

export class FilterClass
{
 static id = "FilterId"; //FilterName, use while consume

 /*@ngInject*/
 public static instance() { //static instance function
    let dataFilter  = () => {
        let filteredObject = () => {
            //filter logic
             return filteredData;
        }
        return filteredObject;  
    }
    return dataFilter;
}   
}
//Module configuration 
angular.module(myModule).filter(FilterClass.id, FilterClass.instance());

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

5 个答案: