How do I identify which widget emits or broadcasts an event in the Service Portal?

nyancer3
Tera Expert

I've seen some very good content on using events to communicate between widgets (for example this post). However, I don't see how to identify the widget that is emitting or broadcasting the event.

Here is the scenario. I want to be able to dynamically embed catalog item widgets based on some user input (press a button, select it from a list of items, whatever). When the user selects the item, it gets added to an array and there is a widget embedded for each item in the array. What I would like to be able to do is to close the embedded widget once the catalog item has been submitted. The default cat item widget emits the event "$sp.sc_cat_item.submitted," but as far as I can tell there is no way to identify the widget that fired the event. If I can identify the widget, then I can remove it from the array.

1 ACCEPTED SOLUTION

Thanks for sharing this info. I already understand how $emit and $broadcast work, and also how they behave when called from $scope versus $rootScope. The issue I am running into is identifying which item fired the event.



I spent some additional time on this and was able to come up with a solution. In this case, I have an array of objects returned by spUtil.get() that I feed into the sp-widget directive. I made a copy of the widget-sc-cat-item widget so that I could add a parameter to the emitted event. I'm not sure if there is a more efficient way to do this, but I ended up sending c.widget with the event. Then, in the widget that embeds the cat item widget, I listen for the event and then loop through the widget item array, using angular.equals to do a deep compare on the widget objects. When I tested this, it worked as I expected and I was able to automatically close the catalog item widget that had already been ordered.


View solution in original post

2 REPLIES 2

dvp
Mega Sage
Mega Sage

Not sure if this is helpful..



$emit dispatches an event upwards ... $broadcast dispatches an event downwards


Detailed explanation


$rootScope.$emit only lets other $rootScope listeners catch it. This is good when you don't want every $scope to get it. Mostly a high level communication. Think of it as adults talking to each other in a room so the kids can't hear them.


$rootScope.$broadcast is a method that lets pretty much everything hear it. This would be the equivalent of parents yelling that dinner is ready so everyone in the house hears it.


$scope.$emit is when you want that $scope and all its parents and $rootScope to hear the event. This is a child whining to their parents at home (but not at a grocery store where other kids can hear).


$scope.$broadcast is for the $scope itself and its children. This is a child whispering to its stuffed animals so their parents can't hear.


Thanks for sharing this info. I already understand how $emit and $broadcast work, and also how they behave when called from $scope versus $rootScope. The issue I am running into is identifying which item fired the event.



I spent some additional time on this and was able to come up with a solution. In this case, I have an array of objects returned by spUtil.get() that I feed into the sp-widget directive. I made a copy of the widget-sc-cat-item widget so that I could add a parameter to the emitted event. I'm not sure if there is a more efficient way to do this, but I ended up sending c.widget with the event. Then, in the widget that embeds the cat item widget, I listen for the event and then loop through the widget item array, using angular.equals to do a deep compare on the widget objects. When I tested this, it worked as I expected and I was able to automatically close the catalog item widget that had already been ordered.