AngularJS passing function to modal ("this" is not referring to the controller I want)

854 views
Skip to first unread message

Charly Terrier

unread,
Jan 4, 2018, 7:33:40 AM1/4/18
to Angular and AngularJS discussion

Hi,

I'm having issue while trying to use function of the parent controller of my modal.

From the parent controller I open a modal, in the modal I do actions and when I click on a button I want to use the function parentOnChange of the parent controller.

To do this I pass the parentOnChange function of the parent controller through the resolve function of IModalService.

In parentOnChange I use other functions of the parent controller, the problem is : keyword "this" in parentOnChange is not referring the parent controller but to the modal controller, and I can't figure out how to solve this :)


Any help would be appreciated ;)



Here is a simplified example :

The parent controller
export class Controller implements IComponentController {
public static $inject: string[] = [
'$uibModal'
];

constructor(
private readonly $uibModal: IModalService
) { }

private openContextMenu(object: MyInterface) {
       const modal = this.$uibModal.open({
           component: 'myContextMenuModal',
           resolve: {
               object: () => object,
               onChange: () => this.parentOnChange
           }
       });
}

public parentOnChange(object: MyInterface) {
console.log(this);
this.oneFunction();
this.twoFunction(object);
}
}

The modal
export class Controller {
    // Bindings
   public readonly close: (data: any) => void;
   public readonly dismiss: () => void;
   public readonly resolve: {
       object: MyInterface,
       onChange(object: MyInterface) : void
   };

    public object: MyInterface;
   public onChange: (object: MyInterface) => void;

public button_Click(): void {
...
this.Change(this.object);
...
}
}
export default {
template: htmlTemplate,
controller: Controller,
bindings: {
resolve: '<',
close: '&',
dismiss: '&'
}
};



Sander Elias

unread,
Jan 4, 2018, 7:45:36 AM1/4/18
to Angular and AngularJS discussion
Hi Charly,

I don't have an answer form the source you are showing. If you can reproduce your issue in a stackblitz/plunker/jsbin it becomes so much easier to help you.

Regards
Sander

Charly Terrier

unread,
Jan 9, 2018, 6:04:28 AM1/9/18
to Angular and AngularJS discussion
Cannot figure out how to solve it, neither got time to create a plunker...

Anyway I did it a different way :

**The parent controller**

    export class Controller implements IComponentController {
        ...
        constructor(
        private $scope: IScope,
        private readonly $uibModal: IModalService
    ) {
        this.$scope.$on('myEventName', this.parentOnChange.bind(this));
    }
        ...

        private openContextMenu(object: MyInterface) {
            const modal = this.$uibModal.open({
                component: 'myContextMenuModal',
                scope: this.$scope, // Passing current scope to the modal
                resolve: {
                    object: () => object,
                    onChange: () => this.parentOnChange
                }
            });
        }
    
        public parentOnChange(_event: IAngularEvent, args: MyInterface[]) {
            console.log(args[0]); // this is my object send by the modal
            this.oneFunction();
            this.twoFunction(object);
        }

        public oneFunction() {
            ...
        }
     
        public twoFunction(object: MyInterface) {
            ...
        }
    }

**The modal**

    export class Controller {
        ...
        // Bindings
        public readonly close: (data: any) => void;
        public readonly dismiss: () => void;
        public readonly resolve: {
            object: MyInterface
        };
    
        public object: MyInterface;
    
        public button_Click(): void {
            ...
            this.$scope.$emit('myEventName', [this.object]);
            ...
Reply all
Reply to author
Forward
0 new messages