angular-ui 使用打字稿的模式

Question

我正在尝试使用 angular-ui-bootstrap 和打字稿创建模态。我从下面的 link（使用 jQuery）中提取示例并将 jQuery 代码转换为打字稿类.

我能够正确打开模态，但模态中的项目未显示且按钮因某种原因无法使用。

见下面的代码或在下面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);

代码运行后，我会将其分享给其他人。

谢谢！

贡萨洛

Answer 1

如果不使用 $scope，则需要使用 "bindToController" 选项。 Here's 工作示例（更新了 html 和 ts 文件）。还有

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

应该是

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

适当的"this"分辨率

Answer 2

谢谢阿列克谢！您的更改非常有效！我将在今天晚些时候上传最终代码，以便其他人也可以使用最终版本。

更新：这是最终的代码：）

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 使用打字稿的模式

angular-ui modal using typescript

angularjs

typescript

angular-ui

angular-ui-bootstrap