在子指令中监听广播 [英] Listen for broadcast in sub directive

问题描述

我是 AngularJS 的新手，需要一些帮助.我有两个指令(父母和孩子).当我单击链接时，父指令将触发子指令正在侦听的广播事件.主要是我无法让广播侦听器在触发时捕获广播事件.到目前为止，这是我的代码:

<a href="" ng-click="checkAll()">全选</a><a href="" ng-click="clearAll()">清除所有</a><div all-checkboxes-listeners><input type="checkbox"/>

AllCheckboxesBroadcast.js

"使用严格";app.directive('allCheckboxesBroadcast', function () {返回 {限制:'A'，控制器:['$scope',功能($范围){//选中所有复选框$scope.checkAll = 函数 () {$scope.$broadcast('allCheckboxes',true);};//取消选中所有复选框$scope.clearAll = 函数 () {$scope.$broadcast('allCheckboxes',false);};}]}})

AllCheckboxesListener.js

"使用严格";app.directive('allCheckboxesListener', function () {返回 {限制:'A'，要求:'^allCheckboxesBroadcast',链接:函数(){if ($scope.$on('allCheckboxes') == true) {angular.forEach(element.find('input[type=checkbox]'), function(){this.prop('checked',true);});}}}})

解决方案

好的，还有一些事情...指令名称必须与驼峰式版本匹配，即在您的情况下为allCheckboxesListeners".你有一个结尾有一个s"，一个没有.关于范围，除非您开始另外指定，否则另一个指令中的任何指令都将自动获得相同的范围.因此，只需将其添加为 link 函数中的参数，它将成为可用的父作用域.另外，在使用 angular 时我不会使用 find().相反，我会将这些复选框绑定到一些对象数组，这样您就不必操作 DOM！此外，除非您同时使用完整版的 jQuery，否则您只能通过 jqLit​​e 中的标签名称进行搜索，这是 angular 所使用的，除非您单独添加了 jQuery(例如，您只能通过 input 进行搜索 例如).

在此处查看示例:http://plnkr.co/edit/0n1NVpAl2u8PYyPd6ygL?p=preview

JavaScript

angular.module('appExample', []).directive('allCheckboxesBroadcast', function() {返回 {限制:'A'，控制器:功能($范围){$scope.checkAll = 函数 () {console.log('checkAll');$scope.$broadcast('allCheckboxes', true);}//取消选中所有复选框$scope.clearAll = 函数 () {console.log('clearAll');$scope.$broadcast('allCheckboxes', false);};}};}).directive('allCheckboxesListeners', function() {返回 {限制:'A'，链接:函数(范围，元素，属性){scope.$on('allCheckboxes', function(event, shouldCheckAllCheckboxes) {console.log(shouldCheckAllCheckboxes);element.find('input').prop('checked', shouldCheckAllCheckboxes);});}};});

HTML

<div all-checkboxes-broadcast><a href="" ng-click="checkAll()">全选</a><a href="" ng-click="clearAll()">清除所有</a><div all-checkboxes-listeners><input type="checkbox"/>

I'm new to AngularJS and need some help. I have two directives (parent and child). When I click a link, the parent directive will fire a broadcast event that the child directive is listening for. Mainly I can't get the broadcast listener to capture the broadcasted event when it is fired. Here is my code so far:

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

AllCheckboxesBroadcast.js

"use strict";

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

                //de-select all checkboxes
                $scope.clearAll = function () {
                    $scope.$broadcast('allCheckboxes',false);
                };
            }
        ]
    }
})

AllCheckboxesListener.js

"use strict";

app.directive('allCheckboxesListener', function () {
    return {
        restrict: 'A',
        require: '^allCheckboxesBroadcast',
        link: function() {
            if ($scope.$on('allCheckboxes') == true) {
                angular.forEach(element.find('input[type=checkbox]'), function(){ 
                    this.prop('checked',true);
                }); 
            }
        }
    }
})

解决方案

Ok so a few things... The directive name must match camel cased version i.e. "allCheckboxesListeners" in your case. You have one with an "s" on the end and one without. Regarding the scope, any directive within another will automatically get the same scope unless you start specifying otherwise. So just add it as a parameter in your link function and it'll be the parent scope which is available. Also I would not use find() when using angular. Instead I would bind those checkboxes to some array of objects so you don't have to manipulate the DOM! Also unless you're using the full version of jQuery alongside, you are limited to searching by tag names in jqLite, which is what angular uses unless you have jQuery added separately (e.g. you'd be limited to searching by only input for example).

See example in action here: http://plnkr.co/edit/0n1NVpAl2u8PYyPd6ygL?p=preview

JavaScript

angular.module('appExample', [])
.directive('allCheckboxesBroadcast', function() {
    return {
        restrict: 'A',
        controller: function($scope) {
            $scope.checkAll = function () {
            console.log('checkAll');
            $scope.$broadcast('allCheckboxes', true);
        }
        //de-select all checkboxes
        $scope.clearAll = function () {
            console.log('clearAll');
            $scope.$broadcast('allCheckboxes', false);
        };
    }
};
})  
.directive('allCheckboxesListeners', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$on('allCheckboxes', function(event, shouldCheckAllCheckboxes) {
                console.log(shouldCheckAllCheckboxes);
                element.find('input').prop('checked', shouldCheckAllCheckboxes);
            });
        }
    };
});

HTML

<body ng-app="appExample">
  <div all-checkboxes-broadcast>
    <a href="" ng-click="checkAll()">Select All</a>
    <a href="" ng-click="clearAll()">Clear All</a>

    <div all-checkboxes-listeners>
      <input type="checkbox" />
    </div>
  </div>
</body>

这篇关于在子指令中监听广播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！