16

次のフィドルhttp://jsfiddle.net/tUyyx/のような angularjs プロジェクト用のカスタム フィルターを作成しました。

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']);

私は何を間違っていますか？

4

1 に答える 1

34

そのjsFiddleのコードを見ると、そのフィルター関数はtext、引数としてetcを受け取る関数を返します。次のようになります。

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、フィルターの引数として持っているためです。textこれにより、Angularは存在しないというサービスを探します。text引数として受け取るのは、返す関数です。

このように考えると、最初の関数（angular.filterに渡す関数）は、最初にフィルターを作成する関数です。この関数は、アプリケーションで1回だけ実行されます。その関数の責任は、別の関数を作成してそれを返すことであり、それが返す関数はフィルターです。関数を返す関数がある理由は、システムに応じて異なる実装を返すことができるようにするためです。おそらくこのようなもの：

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
        }
    }
});
于 2013-02-25T07:46:45.487 に答える