我想从父指令向子指令广播事件。但是，如果我在父指令链接函数中使用 scope.broadcast，那么每个“父”指令中的所有子指令都会收到它。
现在的运作方式: 如果父 (1) 广播事件，则子 (1.1) 和 (2.1) 接收事件。
我希望它如何工作: 我只想将事件从 parent (1) 广播到 child (1.1)，而不是 child (2.1)。
我的指令检查元素是否在屏幕上。我只想要一个这样的指令，并且只有这个指令应该向其他指令发送事件。
<div>
<div parent> <!-- 1 -->
<div child></div> <!-- 1.1 -->
</div>
<div parent> <!-- 2-->
<div child></div> <!-- 2.1 -->
</div>
</div>
最佳答案
可能的原因 - 父指令共享相同的范围，这就是您的事件传播到所有子指令的原因。
解决方案 - 每个指令都应定义其自己的范围，该范围在原型(prototype)上继承自父级。 ( $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>
关于javascript - AngularJS:仅从父级向其子级广播事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33955614/