TypeScript AngularJS component modal - this.$modal

Question

I've turned one of my user data entry forms into a uib-modal, but I get when I attempt to close the modal from the "cancel"button, I get this error: this.$modalInstance.dismiss is not a function. . Same thing is if use this.modalInstance.close(). Which is weird because TypeScript seems to think those methods should be there based on the code completion in VS Code.

Anyway, the basic set up is as follows:

Controller which opens the modal:

class TestModalController {

    static $inject = ['$modal'];
    options: ng.ui.bootstrap.IModalSettings;
    myModal? : ng.ui.bootstrap.IModalInstanceService;

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

        this.options = {
            animation: true,
            component: 'fringeEdit',
            windowClass: 'fringe-edit',
            resolve: {}
        }
    }

    openFringeEdit() {
        this.myModal = this.$modal.open(this.options);
    }
}

This works fine, the modal opens as expected.

This is the modal instance itself:

class FringeEditController {

    static $inject =['$uibModalInstance']
    constructor(private $uibModalInstance: ng.ui.bootstrap.IModalInstanceService) {

    }

    dismiss() {
      this.$uibModalInstance.close("closed");  //This throws error whether using dismiss or close
    }

}

Registration Code:

app.controller("FringeEditController",['$uibModalInstance', FringeEditController]);
app.controller("TestModalController", ['$uibModal', TestModalController]);

app.component("fringeEdit", {
    controller: "FringeEditController",
    templateUrl: "/template/fringeEditTemplate.html",
    bindings: {}
}); 

I've tried several tweaks from various posts here, but I keep getting this error, which leads me to believe that whatever is being passed in as as $uibModalInstance isn't actually a $uibModalInstance, otherwise close and dismiss would work, wouldn't it?

Not really sure what else to try.

Answer 1

When using the component property of the $uibModal.open method, use bindings instead of local injection:

app.component("fringeEdit", {
    controller: "FringeEditController",
    templateUrl: "/template/fringeEditTemplate.html",
    bindings: { close: "&" }
}); 

Then use the bindings in the controller:

dismiss() {
  this.close({$value: "closed"});
}

From the Docs:

$uibModal's open function

options parameter

• component (Type: string, Example: myComponent) - A string reference to the component to be rendered that is registered with Angular's compiler. If using a directive, the directive must have restrict: 'E' and a template or templateUrl set.

  It supports these bindings:

  • close - A method that can be used to close a modal, passing a result. The result must be passed in this format: {$value: myResult}

For more information, see

• UI-Bootstrap Modal Directive API Reference