如何使用 Angular 的装饰器模式增强指令的链接功能？答案

【问题标题】：How can I augment a directive's link function with angular's decorator pattern?如何使用 Angular 的装饰器模式增强指令的链接功能？
【发布时间】：2016-11-07 10:52:06
【问题描述】：

我正在开发一个 Angular 库并寻找一种使用装饰器模式扩展指令的方法：

angular.module('myApp', []).decorator('originaldirectiveDirective', [
  '$delegate', function($delegate) {

    var originalLinkFn;
    originalLinkFn = $delegate[0].link;

    return $delegate;
  }
]);

使用此模式扩充原始指令的最佳方法是什么？（示例用法：在指令上添加额外的监视或额外的事件侦听器，而无需直接修改其代码）。

【问题讨论】：

标签： javascript angularjs angular-directive

【解决方案1】：

您可以很容易地修改或扩展指令的controller。如果您正在寻找的是link（如您的示例中所示），那么这并不难。只需在config阶段修改指令的compile函数即可。

例如：

HTML 模板

<body>
  <my-directive></my-directive>
</body>

JavaScript

angular.module('app', [])

  .config(function($provide) {
    $provide.decorator('myDirectiveDirective', function($delegate) {
      var directive = $delegate[0];

      directive.compile = function() {
        return function(scope) {
          directive.link.apply(this, arguments);
          scope.$watch('value', function() {
            console.log('value', scope.value);
          });
        };
      };

      return $delegate;
    });
  }) 

  .directive('myDirective', function() {
    return {
      restrict: 'E',
      link: function(scope) {
        scope.value = 0; 
      },
      template: '<input type="number" ng-model="value">'
    };
  });

现在您已经装饰了myDirective，以便在value 发生更改时记录它。

相关的plunker在这里https://plnkr.co/edit/mDYxKj

【讨论】：

感谢 Mikko 的指导性示例。你在config阶段做装饰有什么特别的原因吗？
在您必须在配置中进行之前，似乎不再需要了。
@MikkoViitala 谢谢。 directive.compile 让人大开眼界。