1

我试图通过编写组件样式指令对我的 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 确实有效，但这不是一个好的解决方案（例如 - 如果我想在一个页面上多次使用此指令）。

有任何想法吗？

4

1 回答 1

1

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

使用 $broadcast、$emit、$on 的 Angular 自定义事件。

在您的指令中，我将从：

$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();
})
于 2015-11-02T20:57:34.657 回答