Question

尝试按照Angular Decorator指南（https://docs.angularjs.org/guide/decorators）中的模板，我试图创建一个指令并装饰它。

该指令应显示当前日期/时间。我添加了一个（无用的）装饰器来修改link函数，所以指令显示字符串＆＃34;今天＆＃34;而不是日期/时间。

出于某种原因，似乎我的被覆盖的link函数没有被调用。原来被调用了。这是为什么？

代码位于http://plnkr.co/edit/uvtBiN5vNSjk5I89t99C?p=preview（及以下）：

angular.module('app', []);

angular.module('app').directive('myElement',  function(){
  return {
    template: 'Today is {{ date }}',
    link: function(scope, element, attrs){
      console.log('original link called')
      scope.date = new Date();
    }
  }
})

angular.module('app').decorator('myElementDirective', function($delegate){

  $delegate[0].link = function(scope){
    console.log('calling delegate link')
    scope.date = "today"
  }
  return $delegate;
})

Answer 1

更换链接功能时，还需要替换编译功能。

angular.module('app').decorator('myElementDirective', function($delegate){

  $delegate[0].link = function(scope){
    console.log('calling delegate link')
    scope.date = "today"
  }
  //------------------------------------
  //REPLACE compile function
  $delegate[0].compile = function() {
    return $delegate[0].link;
  };
  //------------------------------------
  return $delegate;
})

当指令定义对象（DDO）省略编译函数时，Our examples注册方法会添加一个返回对链接函数的引用的方法。需要更新编译函数以返回对新链接函数的引用。

$compileProvider.directive()忽略DDO的link属性。它仅使用compile属性。

Answer 2

链接函数只是AngularJS中的语法糖。如果使用它，AngularJS将使用该链接函数生成编译函数。但是一旦完成，替换链接功能将没有任何效果。

相反，您应该用您自己的编译函数替换返回新链接函数的编译函数：

angular.module('app').decorator('myElementDirective', function($delegate){
  var originalLink = $delegate[0].link;

  $delegate[0].compile = function() {
      return function(scope, element, attrs) {
        originalLink.apply($delegate[0], arguments);
        scope.date = "today";
      };
    };

  return $delegate;
})

为什么我的装饰指令不会覆盖AngularJS中的原始方法？

2 个答案: