AngularJS:只将事件从父级广播给它的子级
AngularJS: Broadcast event from parent only to it children
我想将事件从父指令广播到子指令。但如果我在父指令链接函数中使用scope.abroadcast,那么每个"父"指令中的所有子指令都会收到它
现在的工作方式:如果父(1)广播事件,则子(1.1)和(2.1)接收事件。
我希望它如何工作:我只想将事件从父级(1)广播给子级(1.1),而不是子级(2.1)。
我的指令检查了元素是否在屏幕上。我只想要一个这样的指令,只有这个指令才能将事件发送给其他指令。
<div>
<div parent> <!-- 1 -->
<div child></div> <!-- 1.1 -->
</div>
<div parent> <!-- 2-->
<div child></div> <!-- 2.1 -->
</div>
</div>
可能的原因-父指令共享相同的范围,这就是为什么您的事件会传播到所有子指令。
解决方案-每个指令都应该定义自己的作用域,其原型通常继承自父指令。($root <-- parent <-- child
)
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
angular
.module('app', [])
.directive('parent', function() {
return {
scope: true,
link: function(scope, element) {
element.on('click', function() {
scope.$broadcast('parent-event');
});
}
};
})
.directive('child', function() {
return {
scope: true,
link: function(scope) {
scope.$on('parent-event', function() {
console.log('child(' + scope.$id + ') caught parent event');
});
}
};
});
</script>
</head>
<body>
<div>
<div parent> Parent {{ $id }}
<div child>Child {{ $id }}</div>
</div>
<hr />
<div parent> Parent {{ $id }}
<div child>Child {{ $id }}</div>
</div>
</div>
</body>
</html>
Plunker
当您braodcast数据时,您正在对所有子作用域执行此操作。可能的解决方案是:
$scope.$broadcast('customEvent', {
target: ['dir1', 'dir2'],
someProp: 'Sending you an Object!' // send whatever you want
});
然后在指令一中
$scope.$on('customEvent', function (event, data) {
if(data.target.indexOf('dir1') === -1 ) return;
});
相关文章:
- 推送器:无法广播客户端事件
- AngularJS:在rootScope上广播/发出的事件多次发生
- 什么'是在AngularJS中处理应用程序状态和事件广播的最佳实践
- AngularJs-向单个控制器广播事件
- AngularJS:只将事件从父级广播给它的子级
- angular js,广播一个事件并等待它完成
- 如何将 AngularJS 事件重新广播到子范围
- 广播事件-工作良好的服务器端,但不是在客户端
- 事件广播到特定用户(套接字).Io, redis, node)
- 监听来自指令内控制器的广播事件
- 如何广播事件到一个元素从rootScope在聚合物
- 如何取消注册或销毁$广播事件
- 使用d3.在d3组件之间调度广播事件
- AngularJs 广播事件
- AngularJS 1.5中的组件不监听$scope中的广播事件
- 角度 - 没有 HTML 和广播事件的控制器
- 如何在JavaScript(或jQuery)中实现自定义广播事件
- AngularJS:如何避免-从app.js调用的广播事件被触发两次
- AngularJS - 在广播事件后更新指令的视图
- 监听angularjs以非angular的方式广播事件