另一个隔离范围内的指令从指令共享数据 [英] Share data from a directive within another isolated scope directive

问题描述

我试图通过编写组件风格的指令采取组件的方法，以我的角度code，但我遇到了一个问题。下面是我对网页HTML模板。请注意，我使用的是 AngularStrap 的标签指令。

I'm trying to take a component approach to my Angular code by writing component style directives, but I have run into a problem. Below is my html template for the page. Note that I'm using the AngularStrap tabs directive.

我遇到的问题是，woSamplesSummary.materialsCount是工作单指令下，不确定的右（外卡窗格范围），但它在标签窗格指令正确显示为分页标题的一部分（内标签窗格范围​​内）。所以基本的问题是如何使用另一个隔离范围内的指令一条指令时，页面上的共享数据？

The problem I'm having is that the woSamplesSummary.materialsCount is undefined right under the work-order directive (outside of the tab pane scope), but it displays correctly in the tab pane directive as part of the tab title (within the tab pane scope). So the basic issue is how to share data on a page when using a directive within another isolated scope directive?

<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和已绑定的属性给控制器，这是正确的所有工作，并允许我使用$范围移开。

Here's my work-order-samples directive. I removed most of the logic, but you can see that I setup woSamplesSummary with two-way binding and have bound the properties to the controller, which is all working correctly and has allowed me to move away from using $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 }
                });
            });
        }
    };
})

所以，问题似乎是标签指令创建一个孤立的范围，所以我不能够提供有关数据我在标签外。

So the problem seems to be that the tabs directive is creating an isolated scope, so I am not able to make the data available outside of the tab I'm in.

好像应该有一种方法时，它的其他隔离范围内的指令来使数据从一个指令。我尝试过许多不同的方法，但没有成功。我的指令中分配值$ rootScope的工作，但它只是不是一个很好的解决方案（例如 - 如果我想多次使用此指令的网页）。

It seems like there should be a way to make data available from a directive when it's used within other isolated scope directives. I've tried many different approaches, but without any success. Assigning the value to $rootScope within my directive does work, but it's just not a good solution (e.g. - if I want to use this directive multiple times on a page).

任何想法？

推荐答案

有角中的沟通有两种方式。其中一个是要使用的服务。另一种是使用$广播和散发$ / $的。

There are two ways of communication in Angular. One of which is to use services. The other is to use $broadcast and $emit/$on.

在您的指令，我会开始：

In your directive I'd start with:

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

然后在接收端：

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

您还必须注销$ rootScope听众以避免内存泄漏。你这样做的方式是通过调用函数的返回$，并在示波器的$破坏事件应用它。

You must also unregister $rootScope listeners to avoid memory leaks. The way you do that is by calling the function that the $on returns and apply it during the scope's $destroy event.

var cleanfunction = $rootScope.$on('showLogin', showLoginDialog());

$scope.$on('$destroy', function(){
  cleanfunction();
})

这篇关于另一个隔离范围内的指令从指令共享数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！