装饰指令

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 文档