gmesorio gmesorio - 6 months ago 178
AngularJS Question

angular-ui modal using typescript

I am trying to create a modal using angular-ui-bootstrap and typescript.
I pulled the example from the following link (which uses jQuery) and converted the jQuery code into typescript classes.

I was able to make the modal open correctly but the items in the modal are not displaying and the buttons are not working for some reason.

See the code below or in the following 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 the code working I will share it for others.

Thank you!

Gonzalo

Answer

You need to use "bindToController" option if you're not using $scope. Here's working example (updated both html and ts files). Also

 modalInstance.result.then(function (selectedItem) {
        this.selected = selectedItem;
    })

Should be

 modalInstance.result.then((selectedItem) => {
        this.selected = selectedItem;
    })

for proper "this" resolution

Comments