AngularJS => デコレータ

構文

デコレータ（名前、デコレータ）;

備考

Decoratorは、サービス、ファクトリ、ディレクティブまたはフィルタを使用前に変更できるようにする関数です。デコレータは、サービスの動作を変更または変更するために使用されます。デコレータ関数の戻り値は、元のサービス、または元のサービスを置き換えたり、元のサービスにラップして委譲したりする新しいサービスです。

すべての装飾は、角度アプリケーションのconfigフェーズで、 $provideを注入し、 $provide.decorator関数を使用して$provideあります。

デコレータ関数には、デコレータのセレクタに一致するサービスへのアクセスを提供するために$delegateオブジェクトが挿入されています。この$delegateはあなたが飾っているサービスになります。デコレータに提供される関数の戻り値は、サービス、ディレクティブ、またはフィルタが装飾された場所で行われます。

他の方法が適切でない場合や、あまりにも面倒であることが判明した場合にのみ、デコレータの使用を検討する必要があります。大規模なアプリケーションが同じサービスを使用しており、1つの部分がサービスの動作を変更している場合は、そのプロセスで混乱やバグを作成するのは簡単です。

典型的な使用事例は、アップグレードできないがそれほど多少の作業や拡張が必要な第三者の依存関係がある場合です。

飾るサービス、工場

以下はサービスデコレータの例であり、サービスによって返されるnullオーバーライドしnull 。

angular.module('app', [])
  .config(function($provide) {
    $provide.decorator('myService', function($delegate) {
      $delegate.getDate = function() { // override with actual date object
        return new Date();
      };
      return $delegate;
    });
  })
  .service('myService', function() {
    this.getDate = function() {
      return null; // w/o decoration we'll be returning null
    };
  })
  .controller('myController', function(myService) {
    var vm = this;
    vm.date = myService.getDate();
  });

<body ng-controller="myController as vm">
  <div ng-bind="vm.date | date:'fullDate'"></div>
</body>

ディレクティブを飾る

ディレクティブはサービスと同様に装飾でき、その機能のいずれかを変更または置き換えることができます。ディレクティブ自体は$ delegate配列のposition 0でアクセスされ、デコレータのnameパラメータにはDirectiveサフィックス（大文字小文字を区別）が含まれている必要があることに注意してください。

したがって、ディレクティブがmyDateと呼ばれる場合は、 $delegate[0]を使用してmyDateDirectiveを使用してアクセスできます。

以下は、ディレクティブが現在の時刻を表示する簡単な例です。現在の時刻を1秒間隔で更新します。装飾がなければ、いつも同じ時間が表示されます。

<body>
  <my-date></my-date>
</body>

angular.module('app', [])
  .config(function($provide) {
    $provide.decorator('myDateDirective', function($delegate, $interval) {
      var directive = $delegate[0]; // access directive

      directive.compile = function() { // modify compile fn
        return function(scope) {
          directive.link.apply(this, arguments);
          $interval(function() {
            scope.date = new Date(); // update date every second
          }, 1000);
        };
      };
      
      return $delegate;
    });
  })
  .directive('myDate', function() {
    return {
      restrict: 'E',
      template: '<span>Current time is {{ date | date:\'MM:ss\' }}</span>',
      link: function(scope) {
        scope.date = new Date(); // get current date
      }
    };
  });

フィルタを飾る

フィルタをデコレートするときは、名前パラメータにFilterサフィックス（大文字と小文字を区別）を含める必要があります。 filterがrepeatと呼ばれる場合、デコレータパラメータはrepeatFilterです。以下では、指定された文字列をn回繰り返して結果が逆になるカスタムフィルタをデコレートします。また、フレームワークの機能に影響を与える可能性があるため、Angleの組み込みフィルタも同様にデコレートできます（推奨されません）。

<body>
  <div ng-bind="'i can haz cheeseburger ' | repeat:2"></div>
</body>

angular.module('app', [])
  .config(function($provide) {
    $provide.decorator('repeatFilter', function($delegate) {
      return function reverse(input, count) {
        // reverse repeated string
        return ($delegate(input, count)).split('').reverse().join(''); 
      };
    });
  })
  .filter('repeat', function() {
    return function(input, count) {
      // repeat string n times
      return (input || '').repeat(count || 1);
    };
  });

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

AngularJS
デコレータ

サーチ…

構文

備考

飾るサービス、工場

ディレクティブを飾る

フィルタを飾る