Question

我正在制作两个Checkbox指令：fancyCheckBox和checkAllCheckbox。我正在尝试向支票全部添加一个事件广播，这样花哨的复选框（会有很多）会听到这个事件，并检查它们是否符合标准。

这是我的fancyCheckBox：

myDir.directive('fancyCheckBox', function() {
    return {
        restrict: 'A',
        scope: {
            isDomain: '=isDomain',
            domain: '=domainId',
            url: '=urlId',
            reason: '@reason',
            clickCb: '&clickCb',
            startChecked: '=isChecked'
        },
        template: '<input type="checkbox" data-ng-click="toggleMe()" data-ng-model="isChecked" />',
        link: function(scope, elem, attrs) {
            scope.isChecked = angular.copy(scope.startChecked);
            scope.toggleMe = function() {
                scope.isChecked = (!scope.isChecked);
                scope.$eval(scope.clickCb(scope));
            }
            scope.$on('checkAllEvent', function() { // Error on this line
                console.log('Herd a check all event');
            });
        }
    }
});

行scope.on('checkAllEvent'产生此错误：

TypeError：对象＃没有方法'on'“

这是我的全部复选框：

myDir.directive('checkAllCheckbox', function() {
    return {
        restrict: 'A',
        scope: {
            reason: '@reason',
            clickCb: '&clickCb',
            startChecked: '=isChecked'
        },
        template: '<input type="checkbox" data-ng-click="checkAll()" data-ng-model="isChecked" />',
        link: function(scope, elem, attrs) {
            scope.isChecked = (scope.startChecked) ? angular.copy(scope.startChecked) : false;
            scope.checkAll = function() {
                scope.isChecked = (!scope.isChecked);
                scope.$eval(function() {
                scope.$eval(function() {
                    scope.$broadcast('checkAllEvent');
                    scope.clickCb(scope)
                });
            });
        }
            }
        }
    }
});

我知道为什么我似乎无法在我的指令中广播或订阅活动？

EDIT。我将scope.on和scope.broadcast更改为scope.$on和scope.$broadcast。这停止了错误，但我的fancyCheckBox仍未收到该事件。有任何想法吗？我想这是因为它不在合适的范围内，但我不知道如何在那里得到它。

Answer 1

您可以尝试使用$ rootScope吗？

            $scope.$eval(function() {
                $rootScope.$broadcast('checkAllEvent');
                scope.clickCb(scope)
            });

编辑：

您可能需要将$ rootScope注入指令

myDir.directive('checkAllCheckbox', function($rootScope) {...

Answer 2

回答您的最新问题：

$ broadcast将事件名称向下发送给所有子范围（及其子级），通知已注册的$ on侦听器。事件生命周期从调用$ broadcast的范围开始。

$ emit通过范围层次结构调度事件名称向上，通知已注册的$ on侦听器。事件生命周期从调用$ emit的范围开始。

换句话说，如果您的checkAllCheckbox指令范围是您的fancyCheckBox指令范围的父级，则使用$ broadcast，如果是子级，则使用$ emit，如果它在同一范围内使用$ broadcast或$ emit，或者如果你没有事先没有，层次结构在$ rootScope上直接使用$ broadcast。

无法订阅Angular Directive中的事件

2 个答案: