无法订阅Angular Directive中的事件(Can't subscribe to events in Angular Directive)

编程入门 行业动态 更新时间:2024-10-17 17:18:11
无法订阅Angular Directive中的事件(Can't subscribe to events in Angular Directive)

我有两个我正在制作的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:Object#没有方法'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) }); }); } } } } });

知道为什么我似乎无法在我的指令中广播或订阅事件吗?


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

I have two Checkbox directives that I'm making: fancyCheckBox and, checkAllCheckbox. I'm trying to add an event broadcast to the check all so that the fancy checkboxes (there will be many) will hear the event and check themselves if they match the criteria.

Here's my 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'); }); } } });

The line scope.on('checkAllEvent' is producing this error:

TypeError: Object # has no method 'on'"

And here's my check all checkbox:

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

Any idea why I can't seem to broadcast or subscribe to events in my directive?


EDIT. I changed scope.on and scope.broadcast to scope.$on and scope.$broadcast. This stopped the error but my fancyCheckBox is still not receiving the event. Any ideas? I imagine it's because it isn't in the right scope but I don't know how to get it there.

最满意答案

你可以尝试使用$ rootScope吗?

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

编辑:

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

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

You could try using $rootScope?

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

EDIT:

You may need to inject $rootScope into your directive

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

更多推荐

本文发布于:2023-07-07 21:33:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1068476.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:事件   Directive   Angular   subscribe   events

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!