Question

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

IModalScope
IModalService
IModalServiceInstance
IModalSettings
IModalStackService

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

我想要达到的目标是：

layout

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

我已在此处找到此非打字稿示例：https://angular-ui.github.io/bootstrap/#/modal

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

Answer 1

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

因为你正在使用＆＃34;控制器作为＆＃34;语法，这里不需要开始使用$scope，而是可以使用angular-ui modal example中显示的解析。

以下是示例代码：

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

Answer 2

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

是。我实际上将模态视为包含成员ItemsListController的{{1}}的扩展。这意味着您不需要采用凌乱的方式共享shownDetails:ItemDetailModalController，因为它只是一个$scope。

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

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

$scope

this.$modal.open({ templateUrl: 'path/To/ItemModalDetails.html', scope: this.$scope, })对应于角带为您提供的内容：http://angular-ui.github.io/bootstrap/#/modal

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

2 个答案: