Search code examples
javascriptangularjseventsangularjs-directivetransclusion

Does ng-transclude stop event propagation in Angular.js?

The problem occurs when I try to send an event from my directive to a nested directive via the $scope object. E.g. $scope.broadcast('event') the child directive doesn't receive the event, but when I use the $rootScope object it works e.g. $rootScope.broadcast('event').

TL;DR: Why doesn't this work: http://plnkr.co/edit/27qYiHOilpVABSwMI0Fb?p=preview when this works: http://plnkr.co/edit/o91yFKnQzHp7edUTTkJE?p=preview

EDIT: In angular.js version 1.3.0 and up this is no longer a issue!!!

Solution

  • Your directive(s) uses ng-transclude. From the docs:

    In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope.

    This is what your scope hierarchy looks like:

    Scope hierarchy

    • 003 is the isolated scope of directive one
    • 004 is the transclusion scope where the two elements live in
    • 005 is the scope of the first directive two
    • 006 is the transclusion scope of the first directive two

    So as you can see the scope of two is not a child scope of one.