I am facing an issue with my page where a list of Leads each have specific actions that are represented by forms. These forms can be displayed multiple times on the same page. Each form has its own scope and controller instance. After submitting a form, an ajax operation is performed via a service, and a message is broadcasted upon completion. However, the problem arises when the event listener is fired for every form instance. How can I ensure that the event is only triggered for the active controller? Here is a snippet of the code:
The service:
/**
* Delegate downline submit
*/
delegatedDownlineSubmit(delegateDownLineModel: IDelegateDownLineModel) {
this.PostJson('/api/Lead/DelegateDownLine', delegateDownLineModel)
.success(function (response: IAjaxResponse) {
if (response !== null) {
LeadServices.rootScope.$broadcast('LeadService.DelegatedDownlineSubmitted', response);
}
});
}
Controller - triggered for each form instance:
delegateDownLineFormScope.$on('LeadService.DelegatedDownlineSubmitted', function (event: ng.IAngularEvent, ajaxResponse: IAjaxResponse) {
//Do stuff
});
I have also attempted to broadcast the message only on the scope:
LeadServices.rootScope.BroadcastToElement('#Lead_123 form[name=DelegateDownLineForm]', 'LeadService.DelegatedDownlineSubmitted', response);
/**
* Broadcast a message to another element on the page
*/
scope.BroadcastToElement = function (selector: any, message: string, ...args: any[]) {
var broadcastArgs = [message];
if (args) {
broadcastArgs = broadcastArgs.concat(args);
}
return angular.element(selector).scope().$broadcast.apply(this, broadcastArgs);
};
Any assistance on resolving this issue would be greatly appreciated. Thank you.