TypeScript AngularJS component modal - this.$modalInstance.dismiss is not a function?

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

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