Is passing data between directives, controllers, and services using $emit and $broadcast bad practice?

Question

Hi I'm a beginning Angular developer and I was wondering if the way I've passed data between controllers is bad practice or not.

I'm creating a seatmap widget whereby you click on a seat and it will display data in another part of the App using a different controller.

1) I have a directive that incorporates dynamic templating. Based on the model being passed (from an ng-repeat), it will create an event listener like so:

if(scope.seat.isAvailable) {
  element.bind('click', function() {
    scope.$emit('clickedSeat', scope.seat);
  }
  element.append(seatAvailableTemplate);
}

2) In my controller, I have the following listening for the click:

$scope.$on('clickedSeat', function(event, seat) {
  seatSelectionService.broadcastSeatData(seat);
}

3) I have a service where I've passed in $rootScope which allows me to broadcast the data to a different controller:

var seatSelectionService = {};
seatSelectionService.broadcastSeatData = function(clickedSeat) {
  seatSelectionService.seatData = clickedSeat;
  $rootScope.$broadcast('seatSelected');
}
return seatSelectionService;

4) In the other controller, I have a listener which sets the $scope attribute, which renders {{selectedSeat}} in the view:

$scope.$on('seatSelected', function() {
  $scope.selectedSeat = seatSelectionService.seatData;
  $scope.apply();
}

Of course I have had to pass in seatSelectionService into both controllers for it to work.

Is there a better way to do this? Or is this way of passing data valid practice?

koolunix · Accepted Answer · 2014-02-19 00:32:02Z

2

I would say less is more- if you can get rid of code do it- I would suggest you remove this in your controller unless you are doing something you are not showing, and put it in your directive, in step one:

$scope.$on('clickedSeat', function(event, seat) {
  seatSelectionService.broadcastSeatData(seat);
}

answered Feb 19, 2014 at 0:32

koolunix

1,99516 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vegas-dev Over a year ago

Thanks! I appreciate the response! Willshaw answered first though so I gave him the check. Again, appreciate it!

Pete · Accepted Answer · 2014-02-19 00:29:08Z

$broadcast and $emit themselves aren't bad practice, but it does look like you've over complicated your app.

You can add services directly to directives - they can have controllers built into them that depend on the services.

So in your directive, add a controller that uses the seatSelectionService, something like:

seatSelectionService.setSeat( scope.seat )

Which cuts out one of the steps at least - your setSeat method would still want to do a $broadcast when it's done down to anything listening.

Directives can be really simple or really complex - they can simply be a quick way of outputting a repeated template, or a dynamic template with a controller and access to multiple services.

Something else you might want to look at is promises - I used to use $broadcast and $emit a lot more than I needed to, until I learnt how to use promises and defer properly

Thanks! Answered my question, learned something new, and pointed me to look into a different way of doing things. I would give you 3 checks if I could :P

Collectives™ on Stack Overflow

Is passing data between directives, controllers, and services using $emit and $broadcast bad practice?

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related