AngularJS => 장식 자

통사론

데코레이터 (이름, 데코레이터);

비고

Decorator 는 서비스 , 공장 , 지시문 또는 필터 를 사용하기 전에 수정하는 기능입니다. Decorator는 서비스 동작을 재정의하거나 수정하는 데 사용됩니다. 데코레이터 함수의 반환 값은 원래 서비스이거나 원래 서비스를 대체하거나 래핑하고 위임 한 새 서비스 일 수 있습니다.

모든 꾸미기 는 각 응용 프로그램의 config 단계에서 $provide 를 삽입하고 $provide.decorator 함수를 사용하여 수행해야합니다.

장식 자 함수에는 장식 자의 선택자와 일치하는 서비스에 대한 액세스를 제공하기 위해 $delegate 객체가 삽입되어 있습니다. 이 $delegate 는 꾸미는 서비스가 될 것입니다. 데코레이터에 제공되는 함수의 반환 값은 서비스, 지시어 또는 필터가 장식 될 때 수행됩니다.

다른 접근법이 적절하지 않거나 너무 지루한 것으로 입증되는 경우에만 데코레이터 사용을 고려해야합니다. 대규모 응용 프로그램이 동일한 서비스를 사용하고 한 부분이 서비스 동작을 변경하면 프로세스에서 혼동 및 / 또는 버그를 쉽게 만들 수 있습니다.

일반적인 사용 사례는 업그레이드 할 수는 없지만 조금 다르게 작동하거나 확장해야하는 타사 종속성이있는 경우입니다.

장식 서비스, 공장

다음은 서비스에 의해 반환 된 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 배열의 위치 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 번 반복하여 결과가 반전되는 맞춤 필터를 꾸밀 것입니다. 앵글의 빌트인 필터도 같은 방식으로 꾸밀 수도 있지만 프레임 워크의 기능에 영향을 줄 수 있으므로 권장하지는 않습니다.

<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
장식 자

수색…

통사론

비고

장식 서비스, 공장

장식 지시문

필터 장식