web-dev-qa-db-ja.com

Angularjsカスタムフィルターと依存関係の注入

私はAngularJSを初めて使用するので、この構文をよく見ます。

function someFunc(){
   return function(input){
    return 'hello' + input;
  }
}

上記の関数は私がよく見る一般的な構文ですが、問題はこのカスタムフィルターの例に固有です。

angular.module('bookFilters', [])
    .filter('newBookFilter', function(){
          return function(input){
        return 'The Book: ' + input.name + 'is new !';
   };
});

関数を別の関数でラップすると、依存性注入を使用する機会が得られることを理解しています。これに関する私の質問は次のとおりです。

フィルターは、ラッピング関数から返された関数を取得しますか？次に、依存性注入を使用して値を関数に注入できますか？ 理論的には：

このコード：

{{bookObj | newBookFilter}}

となります：

{{   bookObj | function(input){return 'The Book: ' + input.name + 'is new !'; }  }}

そして最後に{{}}は、関数から最終的な値を返します。

なぜ最初の関数にinputを注入できないのですか？

angular.module('bookFilters', [])
         .filter('newBookFilter', function(input){
             return 'The Book: ' + input.name + 'is new !';
     });

依存関係の注入が返された関数でのみ機能するのはなぜですか？

私はここで本当に混乱していることを知っています、誰かが私を助けることができるなら私はとても感謝します、ありがとう、そして良い一日を。

javascriptangularjscode-injection
16
Aviel Fedida

Angular factory、service、filter、directive wrappersは、Angularフレーバーを持つJavaScriptオブジェクトと関数を作成するオーブンとして考えられます。したがって、同じスタイルをVasiliyの答え：

// Don't use this code in a real app. It's just to illustrate a point.
angular.module('App', [])

// The following oven makes an Angular flavored JavaScript function that 
// formats a currency
.service('currencyBadFilterFn',
  // We inject a built-in Angular filter, currencyFilter, into our oven
  function(currencyFilter) { 
    // oven produces a function that can be used in other places in Angular code
    return function(number) {
      // produced function returns a currency-formatted number when used
      return currencyFilter(number)   
    }
  }
)

.controller('MainCtrl',
  function($scope, currencyBadFilterFn) {
    $scope.amount = currencyBadFilterFn(10) // $10.00
  }
)

ご覧のとおり、サービスの作成にも同じパターンが使用されています。ここでは、コードの他の場所で使用できる関数を返すサービスを作成しています。

最初の関数であるオーブン関数と.serviceまたは.factoryまたは.filterラッパーは、Angular関数の作成方法を指示します。最初の関数の戻り値は、コードで使用するものです。

11
M.K. Safi

答えはあなたの質問の反対です。 Angularはonlyをファクトリ関数に注入しますが、notを結果の関数に注入します：

   .filter('newBookFilter', function($log, ...){ // <- factory function
       return function(input, ...){              // <- resulting function
       };
   })

ファクトリー関数には、任意の注入パラメーターがあります。結果の関数には固定パラメーターがあります。

2番目の理由は、ファクトリ関数で初期化を実行できることです。これは、たとえば 新しいディレクティブ を定義する場合に役立ちます。また、ファクトリーは、ファクトリー関数から変数と引数をキャプチャできるクロージャーを返します。以下の例を参照してください。依存性注入を使用して、ロギングオブジェクトを取得します。 ここ は完全な例です。

  .filter('joinBy', function ($log) {     // <- injected here
    return function (input, delimiter) {  // <- used here
      var res = (input || []).join(delimiter || ',');
      $log.info(res);
      return res;
    };
  });
21
Vasiliy Kevroletin

これが私がやった方法です。

myApp.filter("myCustomDateFormatter", ['MyFactoryWithCustomFunctions', function (InjectedCustomFunction) {
    return function (input) {
        return InjectedCustomFunction.GetDateFromDotNetJson(input);
    }
}]);
1
Mahesh