Angularjs过滤器错误:";错误:未知提供程序:textProvider"

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

本文关键字：quot 错误 程序 textProvider 未知 Angularjs 过滤器      更新时间：2023-09-26

我为angularjs项目创建了一个自定义过滤器，类似于下面的fiddlehttp://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;
    }
});

但当我使用过滤器时，我会得到以下错误

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)

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

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

我做错了什么？

如果您查看该jsFiddle中的代码，该filter函数将返回一个以text等为参数的函数。应该是这样的：

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

您之所以得到"未知提供者：textProvider"，是因为您将text作为筛选器的参数。这使得Angular寻找一个不存在的名为text的服务。返回的函数将text作为参数。

这样想吧，第一个函数(传递到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
        }
    }
});
相关文章：