Javascript AngularJS：仅从父对象向其子对象广播事件_Javascript_Angularjs_Angularjs Directive_Angular Broadcast

Javascript AngularJS：仅从父对象向其子对象广播事件

javascript angularjs

Javascript AngularJS：仅从父对象向其子对象广播事件,javascript,angularjs,angularjs-directive,angular-broadcast,Javascript,Angularjs,Angularjs Directive,Angular Broadcast,我想将事件从父指令广播到子指令。但如果我在父指令链接函数中使用scope.broadcast，那么每个“父”指令中的所有子指令都会接收它它现在的工作原理：如果父（1）广播事件，则子（1.1）和（2.1）接收事件我希望它如何工作：我只想将事件从父级（1）广播到子级（1.1），而不是子级（2.1）我的指令检查元素是否在屏幕上。我只需要一个这样的指令，并且只有这个指令应该向其他指令发送事件 <div> <div parent>

我想将事件从父指令广播到子指令。但如果我在父指令链接函数中使用scope.broadcast，那么每个“父”指令中的所有子指令都会接收它

它现在的工作原理： 如果父（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>

当您对所有子作用域进行数据广播时，您正在这样做。可能的解决方案是：

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

可能的原因-父指令共享相同的作用域，这就是事件传播到所有子指令的原因

解决方案-每个指令都应该定义自己的作用域，通常从父指令继承。（

$root哇！我试着使用scope:{}isntead of scope:true。谢谢，它可以工作！欢迎！{}
打破scope原型链，隔离指令的唯一父级将是$root
<!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>