如何在打字稿中使用angular-ui-bootstrap（modals）？

I'd like to edit some data from a table using a modal. There are various interfaces in the typescript definitions for angular-ui-bootstrap from definitelyTyped, however they are undocumented and I'm not able to find any examples on how to use them.

我想使用模态从表中编辑一些数据。来自definitelyTyped的angular-ui-bootstrap的typescript定义中有各种接口，但它们没有文档，我无法找到有关如何使用它们的任何示例。

• IModalScope
• IModalScope
• IModalService
• IModalService
• IModalServiceInstance
• IModalServiceInstance
• IModalSettings
• IModalSettings
• IModalStackService
• IModalStackService

https://github.com/borisyankov/DefinitelyTyped/blob/master/angular-ui-bootstrap/angular-ui-bootstrap.d.ts#L146

https://github.com/borisyankov/DefinitelyTyped/blob/master/angular-ui-bootstrap/angular-ui-bootstrap.d.ts#L146

What I'd like to achieve is something like this:

我想要实现的是这样的：

Am I right to assume that both ItemsListController and ItemDetailModalController need an instance of the same scope in order to exchange the data? And how can I define the controller and the template for the modal directive using the interfaces above?

我是否正确地假设ItemsListController和ItemDetailModalController都需要相同范围的实例才能交换数据？如何使用上面的接口为模态指令定义控制器和模板？

I already found this non-typescript example here: https://angular-ui.github.io/bootstrap/#/modal

我已经在这里找到了这个非打字稿的例子：https：//angular-ui.github.io/bootstrap/#/modal

However, as a beginner I've got a hard time understanding what's going on if samples throw everything in one single file without separating the concerns.

然而，作为一个初学者，我很难理解如果样本将所有内容都放在一个文件中而不分离问题的话会发生什么。

2 个解决方案

#1

The instance injected by angular will be of type ng.ui.bootstrap.IModalService.

由angular注入的实例将是ng.ui.bootstrap.IModalService类型。

And since you are using "controller as" syntax, there is no need to start using $scope here, instead you can use resolve as shown in the angular-ui modal example.

由于您使用的是“控制器为”语法，因此无需在此处开始使用$ scope，而是可以使用angular-ui模式示例中所示的resolve。

Here's the example code:

这是示例代码：

class ItemsListController {
    static controllerId = 'ItemsListController';
    static $inject = ['$modal'];

    data = [
        { value1: 'Item1Value1', value2: 'Item1Value2' },
        { value1: 'Item2Value1', value2: 'Item2Value2' }
    ];

    constructor(private $modal: ng.ui.bootstrap.IModalService) { }

    edit(item) {
        var options: ng.ui.bootstrap.IModalSettings = {
            templateUrl: 'modal.html',
            controller: ItemDetailController.controllerId + ' as modal',
            resolve: {
                item: () => item // <- this will pass the same instance 
                                 // of the item displayed in the table to the modal
            }
        };

        this.$modal.open(options).result
            .then(updatedItem => this.save(updatedItem));
            //.then(_ => this.save(item)); // <- this works the same way as the line above
    }

    save(item) {
        console.log('saving', item);
    }
}

class ItemDetailController {
    static controllerId = 'ItemDetailController';
    static $inject = ['$modalInstance', 'item'];

    constructor(private $modalInstance: ng.ui.bootstrap.IModalServiceInstance, public item) { }

    save() {
        this.$modalInstance.close(this.item); // passing this item back 
                                              // is not necessary since it 
                                              // is the same instance of the 
                                              // item sent to the modal
    }

    cancel() {
        this.$modalInstance.dismiss('cancel');
    }
}

#2

Am I right to assume that both ItemsListController and ItemDetailModalController need an instance of the same scope in order to exchange the data?

我是否正确地假设ItemsListController和ItemDetailModalController都需要相同范围的实例才能交换数据？

Yes. I actually think of modals as an extension of ItemsListController containing members shownDetails:ItemDetailModalController. Which means you don't need to come up with a messy way of sharing $scope as its just a single $scope.

是。我实际上认为modals是ItemsListController的扩展，包含成员showsDetails：ItemDetailModalController。这意味着您不需要提供一种混乱的范围，因为它只是一个$ scope。

And how can I define the controller and the template for the modal directive using the interfaces above?

如何使用上面的接口为模态指令定义控制器和模板？

This is what I have (note that you are sharing the scope):

这就是我所拥有的（请注意，您正在分享范围）：

            this.$modal.open({
                templateUrl: 'path/To/ItemModalDetails.html',
                scope: this.$scope,
            })

Where $modal:IModalService corresponds to what angular strap gives you : http://angular-ui.github.io/bootstrap/#/modal

$ modal：IModalService对应于角带给你的东西：http：//angular-ui.github.io/bootstrap/#/modal