angular-ui modal using typescript

Question

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

Aleksey L. · Accepted Answer · 2016-05-23 06:22:35Z

4

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

answered May 23, 2016 at 6:22

Aleksey L.

38.4k11 gold badges86 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gmesorio · Accepted Answer · 2016-05-23 20:59:11Z

Thanks Aleksey! Your changes work perfectly! I will upload the final code working later today so the final version is available for others as well.

UPDATE: Here is the final code working :)

example.js

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",
        bindToController: true,
        controllerAs: "i",
    });

    modalInstance.result.then((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);

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="i.setSelected(item)">{{item}}</a>
                    </li>
                </ul>
                Selected: <b>{{i.selected}}</b>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="i.ok()">OK</button>
                <button class="btn btn-warning" ng-click="i.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>

Collectives™ on Stack Overflow

angular-ui modal using typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related