Question

我正在尝试使用angular-ui-bootstrap和typescript创建一个模态。我从以下link（使用jQuery）中提取示例，并将jQuery代码转换为typescript类。

我能够正确打开模态，但模态中的项目没有显示，按钮因某些原因无效。

请参阅下面的代码或以下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);

一旦我有代码工作，我将分享给其他人。

谢谢！

的Gonzalo

Answer 1

你需要使用＆＃34; bindToController＆＃34;如果您未使用$ scope，则选项。 Here's工作示例（更新了html和ts文件）。还

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

应该是

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

正确＆＃34;这＆＃34;分辨率

Answer 2

谢谢Aleksey！您的更改完美无缺！我将在今天晚些时候上传最终代码，以便最终版本可供其他人使用。

更新：以下是最终的代码：）

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>

使用打字稿的angular-ui模态

2 个答案: