多个相同指令的访问控制器共享相同的父范围答案

【问题标题】：Access controllers of multiple identical directives sharing the same parent scope多个相同指令的访问控制器共享相同的父范围
【发布时间】：2017-06-01 18:39:24
【问题描述】：

我在使用组件上的属性的角度指令时遇到问题。基本上，我希望按钮是可拖动的。我是这样做的：

<body>
  <xx-button xx-draggable>
  <xx-button xx-draggable>
<body>

请参阅此JSFiddle 以了解实施情况。

生成的 DOM 是：

<xx-button class="ng-isolate-scope ng-scope" draggable="true" hm-panstart="$draggableCtrl.ondragstart($event)" hm-panend="$draggableCtrl.ondragend($event)" hm-panmove="$draggableCtrl.ondrag($event)" style="-moz-user-select: none;">
  <button class="btn ng-binding" ng-click="$ctrl.onclick()">
    CLICK ME
  </button>
</xx-button>

xx-draggable 指令将修改 xx-button 指令的 dom 以添加几个锤子处理程序（我正在使用 angular-hammer）来管理按钮的拖动。 xx-draggable 指令有自己的控制器，它使用controllerAs 来明确命名它（$draggableCtrl）。据我了解，controllerAs 基本上会将控制器附加到范围，因此您可以在模板中引用它。问题是，在我的情况下，似乎controllerAs 将两个控制器都附加到相同的范围，导致只有应用在第二个按钮上的指令的控制器可以访问。所以当我拖动第一个按钮（button1）时，第二个（button2）实际上被拖动了......

我的理解是组件应该有一个孤立的范围，所以两者都不应该干涉。第二个指令的controllerAs 应将$draggableCtrl 附加到第二个按钮的范围内，并且不应有任何重叠。

知道发生了什么吗？

更新：

我相信我的问题的根本原因已被描述为here：

通常可以将多个指令应用于一个元素，但可能存在限制，具体取决于范围的类型指令要求的。以下几点将有助于解释这些限制。为简单起见，只考虑了两个指令帐户，但它也适用于多个指令：

[...]

隔离范围 + 无范围 => 隔离指令将使用它自己的创建了孤立的范围。另一个指令将使用其父级的范围

所以事实上，xx-draggable 并不与 xx-button 作用域相关联，而是与它的父作用域相关联，这就是控制器被覆盖的原因。在我看来，这有点违反直觉。

所以我现在的问题是，我如何管理我的指令属性以拥有自己的范围或至少处理 xx-button 的指令范围，知道我不控制 xx-button 的范围类型，我只是在开发一个应该应用于任何类型的小部件的 xx-draggable 指令？

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

最后，我选择了一个远非理想的解决方案，但它实际上以相对“安全”的方式工作，没有对它的使用方式做出假设。

为了能够在模板中独立引用我的指令的控制器，我创建了一个人工的“子作用域”。在链接函数中，我创建了一个随机命名的作用域成员：

const subScope = '_' + Math.random() * 100000000000000000;

我将控制器分配给那个随机生成的成员：

scope[subScope] = ctrl;

然后，当我修改 DOM 以附加处理程序时，我使用该随机引用：

attr.$set('hm-panstart', subScope + '.ondragstart($event)');
attr.$set('hm-panend', subScope + '.ondragend($event)');
attr.$set('hm-panmove', subScope + '.ondrag($event)');

请参阅此JSFiddle 以获得有效的解决方案。

【讨论】：