CODEWITHSUNDEEP
javascriptangularjsformstypescript
juju
juju

Reputation: 449

AngularJs - Broadcast event to single controller

I have a page where there are a list of Leads who each can have certain actions. Each action is a form so the same form can be displayed multiple times on the same page.

Each form has it's own scope and it;s own instance of the controller. When the form is submitted, I call a service to do the ajax operation and upon completion I broadcast a message, and in the controller I listen to the message. The problem is because each instance of the form has its own instance of the controller, the even listener is fired for each form. How can I only call this for the active controller? Here is some sampel 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 - called once for each instance of form:

delegateDownLineFormScope.$on('LeadService.DelegatedDownlineSubmitted', function (event: ng.IAngularEvent, ajaxResponse: IAjaxResponse) {
            //Do stuff
        });

I have also tried calling the broadcast 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);
    };

Thanks in advance for your help.

Upvotes: 1

Views: 1205

Answers (1)

basarat
basarat

Reputation: 275819

Based on

Each form has it's own scope and it;s own instance of the controller.

and

How can I only call this for the active controller

Solution

How do you determine the active controller? If its something like active = true just use that in the even listener: 

delegateDownLineFormScope.$on('LeadService.DelegatedDownlineSubmitted',  (event: ng.IAngularEvent, ajaxResponse: IAjaxResponse)  => {
            if(this.active){
            //Do stuff
            }
        });

Also note I am using an arrow (=>) function.

Upvotes: 1

Related Questions