2013-02-25 13 views
16

anglejsプロジェクト用のカスタムフィルタを次のような形に作成しましたhttp://jsfiddle.net/tUyyx/Angularjsフィルタエラー:「エラー:不明なプロバイダ:textProvider」

​​

が、私は、フィルタを使用するとき、私は、私はこのように私のモジュールを作成して、次のエラー

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

私は間違っていますか?

答えて

34

jsFiddleのコードを見ると、そのフィルタ関数は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を持っているためです。これは、このようなものでなければなりません。これは、存在しない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 
     } 
    } 
}); 
関連する問題