Question

这与问题有关：Listen for broadcast in sub directive

我有两个指令，一个是孩子，一个是父母。问题是，我是什么孩子只捕获父指令的事件。这就是我需要的：

我有一些复选框和一组复选框的全选按钮。当我点击＆＃34;选择全部＆＃34;按钮，我希望它选择所有框。这部分我有工作。问题是我在页面上有两个这样的实例。现在，当我单击＆＃34;选择全部＆＃34;时，将选中页面上的所有复选框，而不仅仅是指令实例中的复选框。我确定这是一个范围问题......但我不确定是什么。这是我的代码：

HTML：

<div all-checkboxes-broadcast>
  <div all-checkboxes-listener>
    <input type="checkbox" />
  </div>
  <a ng-click="checkAll()" href="">Select All</a> <!-- this should ONLY check the boxes above, not the ones below.  Currently clicking either select checks all the boxes on the page.-->
</div>

<div all-checkboxes-broadcast>
  <div all-checkboxes-listener>
    <input type="checkbox" />
  </div>
  <a ng-click="checkAll()" href="">Select All</a>
</div>

AngularJS：

app.directive('allCheckboxesBroadcast', [function () {
    return {
        restrict: 'A',
        scope: true,
        controller: ["$scope",function($scope) {
            //select all checkboxes
            $scope.checkAll = function () {
                $scope.$broadcast('allCheckboxes',true);
            };
        }]
    }
}]);

app.directive('allCheckboxesListener', [function () {
    return {
        restrict: 'A',
        require: '^allCheckboxesBroadcast',
        link: function(scope, element, attrs) {
            scope.$on('allCheckboxes', function(event, shouldCheckAll) {
                element.find('input').prop('checked',shouldCheckAll);
            });
        }
    }
}]);

编辑：我自己找到了答案。通过添加＆＃34;范围：true＆＃34;在父指令中，它创建了一个子范围，该范围将从其父节点原型继承，从而创建我正在寻找的功能。如果有人有更好的方法做到这一点，我会全力以赴。

Answer 1

我自己找到了答案。通过添加＆＃34;范围：true＆＃34;对于父指令（我改变了原始问题以包含此编辑），它创建了一个子范围，它将原型继承自其父级，从而创建我正在寻找的功能。如果有人有更好的方法做到这一点，我会全力以赴。

Answer 2

也许您需要通过在allCheckboxesBroadcast指令中的返回对象中添加参数来隔离范围，例如：scope: {}

您可能想做的事情也是标记这些指令：

<div all-checkboxes-broadcast="1">
  <div all-checkboxes-listener="1">
    <input type="checkbox" />
  </div>
  <a ng-click="checkAll()" href="">Select All</a> <!-- this should ONLY check the boxes above, not the ones below.  Currently clicking either select checks all the boxes on the page.-->
</div>


<div all-checkboxes-broadcast="2">
  <div all-checkboxes-listener="2">
    <input type="checkbox" />
  </div>
  <a ng-click="checkAll()" href="">Select All</a>
</div>

然后：

app.directive('allCheckboxesBroadcast', [function () {
    return {
        restrict: 'A',
        scope: { bcId: "&allCheckboxesBroadcast" },
        controller: ["$scope",function($scope) {
            //select all checkboxes
            $scope.checkAll = function () {
                $scope.$broadcast('allCheckboxes',true, $scope.bcId);
            };
        }]
    }
}]);

app.directive('allCheckboxesListener', [function () {
    return {
        restrict: 'A',
        scope: { bcId: "&allCheckboxesListener" },
        require: '^allCheckboxesBroadcast',
        link: function(scope, element, attrs) {
            scope.$on('allCheckboxes', function(event, shouldCheckAll, id) {
              if(id == scope.bcId){
                element.find('input').prop('checked',shouldCheckAll);
              }
            });
        }
    }
}]);

这是我在其中一个模块中使用的解决方法。如果您找到更好的选择，请告诉我。

更新：我修好了你的plnkr，比我想象的更长，我没有角度专家，孤立的范围仍然可以让我的思绪混乱。主要问题是您没有使用模板，因此您的指令中定义的方法无法在html中访问。我还在范围分配中将&替换为=。我认为&会起作用，但我想我应该再次阅读该文档。无论如何，它是：

http://plnkr.co/edit/J2qBBj3R0rEkfxgPBE84?p=preview

指令范围的指令

2 个答案: