如何在打字稿中使用 angular-ui-bootstrap(模态)? [英] How to use angular-ui-bootstrap (modals) in typescript?

问题描述

我想使用模态编辑表格中的一些数据.在来自 absoluteTyped 的 angular-ui-bootstrap 的打字稿定义中有各种接口，但是它们没有记录，我无法找到有关如何使用它们的任何示例.

• IModalScope
• IModalService
• IModalServiceInstance
• IModalSettings
• IModalStackService

但是，作为初学者，我很难理解如果样本将所有内容都放在一个文件中而不分离关注点会发生什么.

解决方案

angular 注入的实例类型为 ng.ui.bootstrap.IModalService.

并且由于您使用的是controller as"语法，因此无需在此处开始使用 $scope，而是可以使用 angular-ui 模态示例.

示例代码如下:

class ItemsListController {静态控制器 ID = 'ItemsListController';静态 $inject = ['$modal'];数据 = [{ value1: 'Item1Value1', value2: 'Item1Value2' },{ value1: 'Item2Value1', value2: 'Item2Value2' }];构造函数(私有 $modal:ng.ui.bootstrap.IModalService){}编辑(项目){var 选项:ng.ui.bootstrap.IModalSettings = {templateUrl: 'modal.html',控制器:ItemDetailController.controllerId + '作为模态'，解决: {项目:() =>item//<- 这将传递相同的实例//将表格中显示的item转为modal}};this.$modal.open(options).result.then(updatedItem => this.save(updatedItem));//.then(_ => this.save(item));//<- 这与上一行的工作方式相同}保存(项目){console.log('保存', item);}}类 ItemDetailController {静态控制器 ID = 'ItemDetailController';静态 $inject = ['$modalInstance', 'item'];构造函数(私有 $modalInstance:ng.ui.bootstrap.IModalServiceInstance，公共项){}节省() {this.$modalInstance.close(this.item);//把这个项目传回去//没有必要，因为它//是同一个实例//item发送到模态}取消() {this.$modalInstance.dismiss('cancel');}}

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.

• IModalScope
• IModalService
• IModalServiceInstance
• IModalSettings
• IModalStackService

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?

I already found this non-typescript example here: 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.

解决方案

The instance injected by angular will be of type 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.

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');
    }
}

这篇关于如何在打字稿中使用 angular-ui-bootstrap(模态)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！