current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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

share|improve this question
up vote 1 down vote accepted

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

share|improve this answer
up vote -1 down vote

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.