裝飾指令

Created: November-22, 2018

指令可以像服務一樣進行裝飾，我們可以修改或替換它的任何功能。請注意，指令本身在$ delegate 陣列中的位置 0 處訪問，而 decorator 中的 name 引數必須包含 Directive 字尾（區分大小寫）。

因此，如果指令名為 myDate，則可以使用 $delegate[0] 使用 myDateDirective 訪問它。

以下是指令顯示當前時間的簡單示例。我們將裝飾它以一秒鐘的間隔更新當前時間。沒有裝飾它將始終顯示相同的時間。

<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
      }
    };
  });

StackOverflow 文件