javascript Angularjs 过滤器错误:“错误:未知提供者:textProvider”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15062113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 23:20:27  来源:igfitidea点击:

Angularjs filter error: "Error: Unknown provider: textProvider"

javascriptangularjs

提问by Rahul

I created a custom filter for my angularjs project similar to the following fiddle http://jsfiddle.net/tUyyx/.

我为我的 angularjs 项目创建了一个自定义过滤器,类似于以下小提琴http://jsfiddle.net/tUyyx/

myapp.filter('truncate',function(text,length){
    var end = "..."
    text = text.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
    if (isNaN(length))
     length = 23;



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

});

but when I use the filter i get the following error

但是当我使用过滤器时,我收到以下错误

Error: Unknown provider: textProvider <- text <- truncateFilter
    at Error (<anonymous>)
    at http://localhost/javascripts/lib/angular.min.js:28:236
    at Object.c [as get] (http://localhost/javascripts/lib/angular.min.js:26:13)
    at http://localhost/javascripts/lib/angular.min.js:28:317
    at c (http://localhost/javascripts/lib/angular.min.js:26:13)
    at Object.d [as invoke] (http://localhost/javascripts/lib/angular.min.js:26:147)
    at http://localhost/javascripts/lib/angular.min.js:28:335
    at Object.c [as get] (http://localhost/javascripts/lib/angular.min.js:26:13)
    at http://localhost/javascripts/lib/angular.min.js:99:481
    at o (http://localhost/javascripts/lib/angular.min.js:66:471) 

I have created my module like this.

我已经像这样创建了我的模块。

var myapp = angular.module('myapp', ['ngResource']);

What am i doing wrong?

我究竟做错了什么?

回答by Anders Ekdahl

If you look at the code in that jsFiddle, that filter function returns a function that takes textetc as an argument. It should be something like this:

如果您查看该 jsFiddle 中的代码,该过滤器函数会返回一个将textetc 作为参数的函数。它应该是这样的:

myapp.filter('truncate',function(){
    return function(text, length) {
        var end = "..."
        text = text.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
        if (isNaN(length))
         length = 23;



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

The reason you got "Unknown provider: textProvider" is because you have textas an argument to your filter. That makes Angular look for a service called textwhich doesn't exist. It's the function that you return that takes textas an argument.

您得到“Unknown provider: textProvider”的原因是因为您text将过滤器作为参数。这让 Angular 寻找一个text不存在的服务。这是您返回的函数text作为参数。

Think of it this way, the first function (the one you pass into angular.filter) is the function that first creates the filter. That function is only executed once in your application. The responsibility of that function is to create another function and return it, and the function it returns is your filter. The reason you have a function that returns a function is to let you return different implementations depending on your system. Perhaps something like this:

这样想,第一个函数(你传入 angular.filter 的那个)是第一个创建过滤器的函数。该函数仅在您的应用程序中执行一次。该函数的职责是创建另一个函数并返回它,它返回的函数是您的过滤器。你有一个返回函数的函数的原因是让你根据你的系统返回不同的实现。也许是这样的:

myapp.filter('truncate', function(myService) {
    if (myService.someCondition()) {
        return function(text, length) {
            // return the text as usual
        }
    } else {
        return function(text, length) {
            // return the text and do some other things as well
        }
    }
});