To enable your programming environment (like Visual Studio) to recognize types, you must include typescript definitions.
The recommended method for obtaining angular-bootstrap-ui is through the TSD tool
Once you have the tool installed, you can run the following command in your project's command line:
tsd install angular-ui-bootstrap --resolve --save
This command will "install" the file angular-ui-bootstrap.d.ts in your typings folder. If your development environment does not detect it, simply add
/// <reference path="../../../typings/angular-ui-bootstrap/angular-ui-bootstrap.d.ts" />
at the beginning of your typescript file. Note that the path may vary depending on your folder structures (this is just an example).
After that, it's preferable to encapsulate the angular-ui-bootstrap modal in a service. You can create a template confirmation-modal.html like this:
<div>
<div class="modal-header">
<h3 class="modal-title">{{ modal.title }}</h3>
</div>
<div class="modal-body">
{{ modal.bodyText }}
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="modal.ok()">OK</button>
<button class="btn btn-default" type="button" ng-click="modal.cancel()">Cancel</button>
</div>
</div>
This view represents a basic confirmation dialog with OK and Cancel buttons, a title, and a body text. It gives you a general idea of how it works.
Next, you can create a service modal.service.ts with a function to display a confirmation dialog that includes a title, body text, and callback functions for the buttons. Here is an example:
(The content for this section can remain the same with no changes, as it provides detailed instructions on creating the modal service and controller)
By encapsulating all the functionality in a service, you can easily invoke the confirmation dialog from any part of your application where the service is injected. For instance, in a view attached to a controller:
(The content for this section can remain the same with no changes, as it demonstrates how to use the modal service in a controller)
Through this approach, you only need to provide the necessary information for the modal (title, body text) and the actions to take when the user interacts with the dialog.