听子指令广播 [英] Listen for broadcast in sub directive
问题描述
我是新来AngularJS，需要一些帮助。我有两个指令（父母和子女）。当我点击一个链接，父指令将激发孩子指令侦听广播事件。主要是我不能当它被发射广播监听器捕获广播的事件。这里是我的code迄今：
＆LT; DIV所有复选框广播＆GT;
＆LT; A HREF =NG点击=checkAll（）＆GT;选择全部＆LT; / A＆GT;
＆LT; A HREF =NG点击=clearAll（）＆GT;全部清除＆LT; / A＆GT;
＆LT; DIV所有复选框，听众＆GT;
＆LT;输入类型=复选框/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
AllCheckboxesBroadcast.js
使用严格的;app.directive（'allCheckboxesBroadcast'，函数（）{
返回{
限制：'A'，
控制器：['$范围'，
功能（$范围）{
//选取所有复选框
$ scope.checkAll =功能（）{
。$ $范围广播（'allCheckboxes'，真）;
}; //取消选择所有复选框
$ scope.clearAll =功能（）{
。$ $范围广播（'allCheckboxes'，FALSE）;
};
}
]
}
}）
AllCheckboxesListener.js
使用严格的;app.directive（'allCheckboxesListener'，函数（）{
返回{
限制：'A'，
要求：'^ allCheckboxesBroadcast'，
链接：功能（）{
如果（$范围。在$（'allCheckboxes'）==真）{
angular.forEach（element.find（输入[类型=复选框]'），功能（）{
this.prop（'检查'，真）;
}）;
}
}
}
}）
确定这样一些东西......该指令名称必须与骆驼套管的版本即allCheckboxesListeners你的情况。你有一个在末端的S和一个没有。关于范围，除非你开始指定，否则在另一个任何指令，将自动获得同样的范围。所以只是将它作为一个参数在链接功能，这将是父作用域是可用。我也不会用找到（）采用了棱角分明的时候。相反，我将这些复选框绑定到对象的数组一些，所以你不必操作DOM！此外，除非您使用的是完整版的jQuery的旁边，则只能由jqLite，这就是角用途，除非你的jQuery单独添加的标签名称搜索（例如，你会被限制只能由<$ C $搜索C>输入为例）。
请参阅这里的操作实例：
http://plnkr.co/edit/0n1NVpAl2u8PYyPd6ygL?p=$p$pview
的JavaScript
angular.module（'appExample'，[]）
.directive（'allCheckboxesBroadcast'，函数（）{
返回{
限制：'A'，
控制器：函数（$范围）{
$ scope.checkAll =功能（）{
的console.log（'checkAll'）;
。$ $范围广播（'allCheckboxes'，真）;
}
//取消选择所有复选框
$ scope.clearAll =功能（）{
的console.log（'clearAll'）;
。$ $范围广播（'allCheckboxes'，FALSE）;
};
}
};
}）
.directive（'allCheckboxesListeners'，函数（）{
返回{
限制：'A'，
链接：功能（范围，元素，ATTRS）{
范围。在$（'allCheckboxes'，函数（事件，shouldCheckAllCheckboxes）{
的console.log（shouldCheckAllCheckboxes）;
。element.find（'输入'）丙（'检查'，shouldCheckAllCheckboxes）;
}）;
}
};
}）;
HTML
＆LT;机身NG-应用=appExample＆GT;
＆LT; DIV所有复选框广播＆GT;
＆LT; A HREF =NG点击=checkAll（）＆GT;选择全部＆LT; / A＆GT;
＆LT; A HREF =NG点击=clearAll（）＆GT;全部清除＆LT; / A＆GT; ＆LT; DIV所有复选框，听众＆GT;
＆LT;输入类型=复选框/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
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屋！
