Listen for broadcast in sub directive

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);
                }); 
            }
        }
    }
})

标签： angularjs angularjs-directive

1条回答

不美不萌又怎样

2楼-- · 2019-09-10 17:33

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>

0人赞添加讨论(0) 举报

Listen for broadcast in sub directive

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间