Typescript Angular ui bootstrap modal

Question

I am using angular.ui.bootstrap modal to show a form in a modal. Everything is working fine, except when I close the modal, I want a table on the parent page to be updated with the new item added in the modal.

My parent controller:

module MyApp.Controllers {

export interface IController {
    items: Models.IItem[];
}

export interface IControllerScope {

}

export class Controller implements IController {
    items: Models.IItem[];

    constructor(
        private $scope: IControllerScope,
        private $modal: ng.ui.bootstrap.IModalService) {

    }

    addItem() {
        var options: ng.ui.bootstrap.IModalSettings = {
            templateUrl: '/directives/formFirective',
            controller: 'formController',
            controllerAs: 'modal',
            resolve: {
                id: () => 1234
            }
        };

        this.$modal.open(options).result
            .then(function (item) {
                // How do I add item to the instance variable items here?
                this.items.push(item) // Does not work here :(
                console.log(item)
            });
    }
}

}

Then in the formController I have:

this.$modalInstance.close(item);

My question is how to add the item to the instance variable items on the parent controller on modal close?

Thanks.

that looks correct. Maybe you need to add items to the $scope? Do you get a console.log from the then-function? — Gustav
– Gustav, Commented Sep 4, 2015 at 6:47
I fixed it by removing the function like this......then((item) => this.updateList(item)) — Bill Posters
– Bill Posters, Commented Sep 4, 2015 at 6:53
Hi, Bill I have a very similar issue. I just wonder how do you access the Id 1234 that you are passing in the other controller. Can you please post your code including the template as a sample please? — user1829319
– user1829319, Commented Dec 5, 2015 at 10:53
Hi user1829319, You just inject it into the constructor, the same way you would inject anything. Like this 'constructor( private id: number, ) { }' — Bill Posters
– Bill Posters, Commented Dec 8, 2015 at 3:12

Martin Bodocky · Accepted Answer · 2016-04-12 09:26:31Z

1

try to change =>

function (item) {
                // How do I add item to the instance variable items here?
                this.items.push(item) // Does not work here :(
                console.log(item)
            }

in to:

(item) => {
                // How do I add item to the instance variable items here?
                this.items.push(item) // Does not work here :(
                console.log(item)
            }

answered Apr 12, 2016 at 9:26

Martin Bodocky

7111 gold badge6 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Typescript Angular ui bootstrap modal

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related