Angularjs自定义过滤器

时间:2013-11-16 15:14:21

标签: angularjs filter provider directive

我使用angularjs构建了一个应用程序,我想使用一些自定义过滤器。但是当我注入它时,我有这个错误“错误:未知的提供者”。这是我的代码的一部分: 这是我的应用:angular.module('myApp', ['filters']) 这是我的过滤器:

angular.module('filters', [])
.filter('truncate', function () {
    return function (text, length, end) {
        if (isNaN(length))
            length = 10;

        if (end === undefined)
            end = "...";

        if (text.length <= length || text.length - end.length <= length) {
            return text;
        }
        else {
            return String(text).substring(0, length-end.length) + end;
        }

    };
});

在我的模板中:{{currentGroup.zk0201_nom | truncate:7}} 这是错误:

Error: Unknown provider: truncateFilterProvider <- truncateFilter
    at Error (<anonymous>)
    at ...assets/js/angular/angular.js:2734:15
    at Object.getService [as get] (...assets/js/angular/angular.js:2862:39)
    at ...assets/js/angular/angular.js:2739:45
    at Object.getService [as get] (....assets/js/angular/angular.js:2862:39)
    at ...assets/js/angular/angular.js:9604:24
    at filter (...assets/js/angular/angular.js:6157:14)
    at _filterChain (...assets/js/angular/angular.js:6148:41)
    at statements (...assets/js/angular/angular.js:6124:25)
    at parser (...assets/js/angular/angular.js:6057:13) 

有人可以帮我吗?而且我想确切地说我的所有指令和工厂都不起作用。 在此先感谢:)

4 个答案:

答案 0 :(得分:2)

我做了类似的事情并且工作得非常好,其他地方可能有问题,下面是我的工作方式:

完整代码:http://noypi-linux.blogspot.com/2014/07/angularjs-filter-creating-custom-filter.html

var myapp = angular.module('MyFilterApp', []);
myapp.filter('myfilter', function() {
    return function(input, param1) {
    console.log("------------------------------------------------- begin dump of custom parameters");
    console.log("input=",input);
    console.log("param1(string)=", param1);
    var args = Array.prototype.slice.call(arguments);
    console.log("arguments=", args.length);
    if (3<=args.length) {
        console.log("param2(string)=", args[2]);
    }
    if (4<=args.length) {
        console.log("param3(bool)=", args[3]);
    }
    console.log("------------------------------------------------- end dump of custom parameters");

    // filter
    if (5<=args.length) {
        return window[args[4]](input);
    }

    return input;

    };
});

答案 1 :(得分:1)

确保已加载JS文件并声明对filters模块的依赖性。例如。如果"app"是您的主要模块,请在声明中添加"filters"

var app = angular.module("app", ["x", "y", "z", ..., "filters"]);

答案 2 :(得分:0)

您确定过滤器模块的文件已加载到您的页面中吗?

我在Plunkr上尝试了你的代码,我没有任何错误:

http://plnkr.co/edit/YpS9LvLeKZy62PgKNmlm?p=preview

答案 3 :(得分:0)

我遇到了与我正在处理的自定义过滤器类似的东西。我找到的解决方案是您需要在HTML中使用&#34; filter&#34;

为自定义过滤器添加前缀
  filter: truncate: 7
相关问题