为什么“this”在新的 Angular 1.5 组件中会丢失上下文？

Question

在使用新组件时遇到了一个非常奇怪的问题。当我们有一个 1.4 指令时，我们有以下代码......

(function () {
  'use strict';

angular.module('app.board').directive('dcCb', dcClipboardCopy);

  function dcCb() {
    return {
      link : function(scope, elem) {

        var clipboard = new Clipboard(elem[0]);

        elem.on('$destroy', function() {
          clipboard.destroy();
        });
      }
    };
  }
})();

clipboard.destroy() 函数内部如下...

Clipboard.prototype.destroy = function(){
    this.listeners.destroy();
}

在 1.4 中this 与元素相同，所以...

<button class="btn btn-sm btn-menu-outline copy-button" ...

所以这很好用，因为按钮元素似乎具有可以调用的 listeners 属性。

但是在升级到 1.5 之后，现在我们有了这样的组件....

(function() {
  'use strict';
  angular.module('app.board').component('dcCb', {
...
    controller: [ '$element','$scope',function($element,$scope) {

      var self = this;
      self.$postLink = postLink;
      function postLink(){
        var clipboard = new Clipboard($element[0]);
...
        $element.on('$destroy', clipboard.destroy);
      }

    }]
  });
})();

this（在剪贴板的销毁函数中）现在是控制器对象。所以尝试调用this.listeners 会引发错误。

第一个问题： 我知道新组件中的this 是组件范围，但在 1.4 中它是按钮元素。当然在这两个按钮元素中都应该是$element？我们在 1.4 中做错了吗？

第二个问题： var clipboard = new Clipboard($element[0]) 不应该强制剪贴板中this 的上下文始终是剪贴板本身（由于new 关键字）？

Answer 1

您正在将一个在类上任意定义的函数交给窗口和事件侦听器，以便在与剪贴板实例不同的上下文中执行：

$element.on('$destroy', clipboard.destroy);

这是 javascript 中执行上下文的基本概念，我建议您阅读它。但是您可以通过简单地绑定您正在传递的函数的上下文来轻松解决您当前的问题：

$element.on('$destroy', clipboard.destroy.bind(clipboard));