在另一个隔离作用域指令内共享指令中的数据

Question

我正试图通过编写组件样式的指令来对我的Angular代码采用组件方法，但我遇到了一个问题。下面是我的网页html模板。请注意，我使用的是AngularStrap选项卡指令。

我遇到的问题是，woSamplesSummary.materialsCount在工单指令下（在选项卡窗格范围外）未定义，但它在选项卡窗格指令中作为选项卡标题的一部分正确显示（在选项卡面板范围内）。因此，基本问题是，当在另一个隔离范围指令中使用指令时，如何在页面上共享数据？

<work-order wo-id="{{woId}}"></work-order>
<div>Materials Count: {{woSamplesSummary.materialsCount}}</div>
<!--- TABS ------>
<div ng-show="woId" bs-tabs>
    <!--- MATERIALS --->
    <div bs-pane title="Materials ({{woSamplesSummary.materialsCount}})" id="materials">
        <work-order-samples 
            wo-id="{{woId}}" 
            wo-samples-summary="woSamplesSummary" >
        </work-order-samples>
    </div>
    <!--- additional tabs not shown --->
</div>

这是我的工单样本指令。我删除了大部分逻辑，但您可以看到，我使用双向绑定设置了woSamplesSummary，并将属性绑定到控制器，这一切都正常工作，并使我不再使用$scope。

.directive('workOrderSamples', function () {
    return {
        restrict: 'E',
        replace: 'false',
        templateUrl: 'myTemplate',
        scope: { },
        controllerAs: 'wosamplesCtlr',
        bindToController: {
            woId: '@',
            woSamplesSummary: '='
        },
        controller: function ($scope, $element, $attrs, myModel) {
            var self = this;
            $attrs.$observe('woId', function(woId) {
                workOrderSamples.find(conditions).then(function () {
                    self.woSamples          = workOrderSamples;
                    self.woSamplesSummary   = {
                        batchCount: workOrderSamples.batches.length,
                        materialsCount: workOrderSamples.list.length }
                });
            });
        }
    };
})

所以问题似乎是tabs指令正在创建一个孤立的范围，所以我无法使数据在我所在的选项卡之外可用。

当指令在其他隔离范围指令中使用时，似乎应该有一种方法可以从指令中获得数据。我尝试了很多不同的方法，但都没有成功。在我的指令中为$rootScope赋值确实有效，但这不是一个好的解决方案（例如，如果我想在一个页面上多次使用此指令）。

有什么想法吗？

Answer 1

Angular中有两种通信方式。其中之一就是使用服务。另一种是使用$broadcast和$emit/$on。

使用$broadcast、$emit、$on的角度自定义事件

在你的指令中，我会从开始

$rootScope.$broadcast('myEvent', data)

然后在接收端：

$rootScope.$on('myEvent', function(e, args){
   // do stuff
});

您还必须注销$rootScope侦听器，以避免内存泄漏。方法是调用$on返回的函数，并在作用域的$destroy事件期间应用它。

var cleanfunction = $rootScope.$on('showLogin', showLoginDialog());
$scope.$on('$destroy', function(){
  cleanfunction();
})