Currently, my goal is to create a modal using angular-ui-bootstrap combined with typescript. To begin, I referenced an example from this link (which originally utilizes jQuery) and proceeded to convert the jQuery code into typescript classes.
After successfully implementing the modal's opening functionality, I encountered issues where the items within the modal were not displaying properly, and the buttons were unresponsive for unknown reasons.
You can review the code snippet below or access the live example on this plunker.
index.html:
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-app="ui.bootstrap.demo" ng-controller="ModalDemoCtrl as c">
<script type="text/ng-template" id="myModalContent.html">
<div>
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in i.items">
<a ng-click="setSelected(item)">{{item}}</a>
</li>
</ul>
Selected: <b>{{selected}}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
</script>
<button class="btn btn-default" ng-click="c.open()">Open me!</button>
<div ng-show="c.getSelected()">Selection from a modal: {{c.getSelected()}}</div>
</div>
</body>
</html>
example.ts
angular
.module('ui.bootstrap.demo', ['ui.bootstrap']);
class ModalDemoCtrl {
private selected: string;
static $inject = ['$modal'];
constructor(private $modal: ng.ui.bootstrap.IModalService) {
}
getSelected(): string {
return this.selected;
}
open(): void {
var modalInstance: ng.ui.bootstrap.IModalServiceInstance = this.$modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl'
});
modalInstance.result.then(function (selectedItem) {
this.selected = selectedItem;
});
};
}
angular
.module('ui.bootstrap.demo')
.controller('ModalDemoCtrl', ModalDemoCtrl);
class ModalInstanceCtrl {
public items: string[] = ['item1', 'item2', 'item3'];
public selected: string = this.items[0];
static $inject = ['$modalInstance'];
constructor(private $modalInstance: ng.ui.bootstrap.IModalServiceInstance) {
}
setSelected(item): void {
this.selected = item;
}
ok(): void {
this.$modalInstance.close(this.selected);
};
cancel(): void {
this.$modalInstance.dismiss('cancel');
};
}
angular
.module('ui.bootstrap.demo')
.controller('ModalInstanceCtrl', ModalInstanceCtrl);
Once I have resolved the issues and ensured that the code functions correctly, I plan to share it with others interested in similar implementations.
Thank you for your time and assistance!
Sincerely, Gonzalo