angularjs - 如何链接在 angularjs 中使用隔离范围的嵌套指令

Question

我正在尝试链接两个都使用隔离范围的嵌套指令。

<div ng-controller="myController">
    <my-dir on-done="done()">
        <my-dir2 on-done="done()">
        </my-dir2>
    </my-dir>  
</div>

我希望第二个指令(my-dir2)调用第一个指令(my-dir)的done()函数，而第一个指令又会调用 Controller 一个。

不幸的是，我不知道如何使第二个指令访问第一个指令的回调(到目前为止，第二个指令正在查看高级 Controller 内部，绕过第一个指令)。

我认为可以使用“require”，但我不能，因为这两个指令不相关(我想在其他指令中使用 my-dir2，而不仅仅是 my-dir)。

要明确的是:我不想使用 require，因为这意味着 myDir 对 myDir2 存在依赖关系。我的观点是:我希望能够在其他指令中重用 myDir2 。所以我不希望 myDir2 基于 myDir，但我确实想在完成某些操作时通知上层指令(myDir)(例如在 js 中的回调中)。

我做了一个plunker :正如您在 javascript 控制台中看到的，my-dir2 直接从高级 Controller 调用 did 函数。

有人有一个干净的方法来处理这种情况吗？

谢谢

Answer 1

更新:

为了能够编写彼此独立的指令，您需要使用事件:

1. 使用 $emit('myEvent', 'myData') 触发一个事件，该事件将由层次结构中向上的作用域处理。
2. 使用 $broadcast('myEvent', 'myData') 触发将由层次结构中向下的作用域处理的事件。
3. 要处理由 $emit 或 $broadcast 触发的事件，请使用 $on('myEvent', function(event, data){\\你的代码})

P.S.:在您的情况下， $emit 将不起作用，因为两个指令作用域位于层次结构中的同一级别，因此您需要使用 $rootScope.$broadcast(' myEvent'\*, myData*\); 我已经更新了我的 plunker 以反射(reflect)所需的更改 http://plnkr.co/edit/eTkO6sk6hpuYPnCjlSKn?p=info

以下内容将使内部指令依赖于外部指令:

基本上，为了能够在第一个指令中调用函数，您需要做一些更改:

1. 将 require = '^myDir' 添加到 myDir2
2. 从 myDir2 中删除 onDone 并保留隔离范围范围:{}
3. 将 Controller 参数添加到myDir2中的链接函数link:
函数(范围，元素，属性， Controller )
4. 在 myDir1 Controller 中更改 done 函数的定义从 $scope.done 到 this.done
5. 在myDir2中调用controller.done()

这是一个需要更改的 plunker http://plnkr.co/edit/eTkO6sk6hpuYPnCjlSKn