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

Posted 2023-03-13

【中文标题】如何在打字稿中使用 angular-ui-bootstrap（模态）？

【英文标题】：How to use angular-ui-bootstrap (modals) in typescript?

【发布时间】：2015-03-04 10:00:32

【问题描述】：

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

IModalScope IModalService IModalServiceInstance IModalSettings IModalStackService

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

我想要实现的是这样的：

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

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

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

【参考方案1】：

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

是的。我实际上认为模态是ItemsListController 的扩展，包含成员shownDetails:ItemDetailModalController。这意味着您不需要想出一种混乱的方式来分享$scope，因为它只是一个$scope。

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

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

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

$modal:IModalService 对应的角带为您提供什么：http://angular-ui.github.io/bootstrap/#/modal

【讨论】：

那么控制器是否真的配置/调用了模态？这不是破坏 SOC 吗？

没有。它与从控制器执行error = "bad thing happened" 相同。控制器驱动 UI，只是不使用$element

是的，我第一次看到 $element 时真的很困惑，尽管它在示例中似乎很常见。我只是认为有一种方法可以在 HTML 端配置模式。好吧，现在一切都清楚了（DT 接口除外）

我使用的是真正旧版本（1.5 岁）。这些接口对应于新版本的角带，我已经更新了答案以反映这一点。 AKA DT 接口是正确的。

【参考方案2】：

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

由于您使用的是“controller as”语法，因此无需在此处开始使用$scope，而是可以使用angular-ui modal example 中所示的resolve。

示例代码如下：

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

【讨论】：

嗨 Juanjo，我喜欢你使用的这种风格，我更喜欢它。但是，我有一些问题。我已经在这里的另一篇文章中发布了我的问题：***.com/questions/34103868/…