Question

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

<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，以添加几个锤子处理程序（我使用角锤）来管理按钮的拖动。 xx-draggable指令有自己的控制器，使用controllerAs明确命名它（$draggableCtrl）。据我了解，controllerAs基本上将控制器附加到范围，因此在模板中您可以引用它。问题是，在我的情况下，似乎controllerAs将两个控制器附加到同一范围，导致只有第二个按钮上应用的指令的控制器才可访问。因此，当我拖动第一个按钮（button1）时，第二个按钮（button2）被有效拖动...

我的理解是该组件应该具有独立的范围，因此两者都不应该干扰。第二个指令的controllerAs应该将$draggableCtrl附加到第二个按钮的范围，并且不应该有任何重叠。

知道发生了什么事吗？

更新

我认为问题的根本原因是here：

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

[...]

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

所以实际上，xx-draggable与xx-button范围没有关联，而是与其父范围相关联，这就是控制器被覆盖的原因。在我看来，这有点违反直觉。

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

Answer 1

最后，我找到了一个远非理想的解决方案，但实际上是以一种相对'安全'的方式工作，而没有对如何使用它做出假设。

为了能够在模板中独立地引用我的指令的控制器，我创建了一个人造的“subScope”。在link函数中，我创建了一个随机命名的范围成员：

https://www.youtube.com/%2Ftv?spfreload=10#/watch/video/idle?v=ObwXTI8We1E&resume

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

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

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

scope[subScope] = ctrl;

有关正常工作的解决方案，请参阅此JSFiddle。

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

1 个答案: