AngularJS: событие широковещания от родителя только к нему дети

Я хочу передать событие из родительской директивы в дочерний. Но если я использую scope.broadcast в функции родительской директивной ссылки, тогда все дети в каждой «родительской» директиве получат ее.AngularJS: событие широковещания от родителя только к нему дети

Как это работает сейчас: Если родительское (1) вещательное событие, то событие child (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>

источник

2015-11-27 psalkowski

Возможная причина - родительские директивы разделяет те же область применения, поэтому ваше событие распространяется на все дочерние директивы.

Решение - каждая директива должна определять свой собственный объем, который прототипно наследует от родителя. ($root <-- parent <-- child)

<!DOCTYPE html> 
<html ng-app="app"> 

    <head> 
    <script data-require="[email protected]" 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

источник

2015-11-27 11:12:17 sbedulin

Wow! Я пытался с областью действия: {} isntead of scope: true. Спасибо, это работает! – psalkowski

Добро пожаловать! '{}' цепочка прототипов пробела, единственным родителем для директив изоляции будет '$ root' – sbedulin

Когда вы делаете данные о предмете, вы делаете это во всех дочерних областях. решение Возможное может быть такой:

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

источник

2015-11-27 11:01:28 Przemek

AngularJS: событие широковещания от родителя только к нему дети

ответ

Смежные вопросы