AngularJs: to Propagate event between directives by $emit
angularjs, angularjs-directive, angularjs-scope
Solution
`$emit` dispatches an event upwards through the scope hierarchy. Your directives are siblings and thus `$emit` won't work.
The solution might be to `$broadcast` an event from a parent scope. Do it from `ctrl` if that's an option for you, or inject `$rootScope` to the directive and do `$rootScope.$broadcast` from there:
$rootScope.$brodcast("UPDATE_PARENT","updated");
Mind that `$broadcasting` events from `$rootScope` might seem to be an anti-pattern for AngularJS. It strongly depends on the usecase. There are other solutions to your problem:
- One of them is to create a parent directive for both of your directives.
- Another one is to use an intermediatory `service` which will hold values. Then you can do `$watch` on the service data and react accordingly.
- You can `$emit` the event to the `ctrl` and then `ctrl` will `$broadcast` it down to the other directive.
Choose whatever fits your needs best.
Problem
I have under one controller two directives : ``` <div ng-controller="ctrl"> <div data-dy-items-list items="items"></div> // FIRST DIRECTIVE <div data-dy-subitems-list subitems="subitems"></div> //SECON DIRECTIVE </div> ``` In the Second directive template, I have one button and in the directive.js file in the controller section I did this : ``` $scope.clickButton= function () { ...... $scope.$emit("UPDATE_PARENT","updated"); } ``` In the first directive, I would like to do this in the controller section: ``` $scope.update = false; $scope.$on("UPDATE_PARENT", function (event,message){ $scope.update = true; console.log('update: ' + $scope.update); }); ``` But it doesn't work!!!