Javascript 如何在打字稿中使用 angular-ui-bootstrap（模态）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27803691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use angular-ui-bootstrap (modals) in typescript?
提问by xvdiff
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.
我想使用模态编辑表中的一些数据。在来自 absoluteTyped 的 angular-ui-bootstrap 的打字稿定义中有各种接口，但是它们没有记录，我无法找到有关如何使用它们的任何示例。
- IModalScope
- IModalService
- IModalServiceInstance
- IModalSettings
- IModalStackService
- 模态范围
- 模态服务
- IModalServiceInstance
- 模态设置
- IModalStackService
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 都需要一个相同范围的实例来交换数据是否正确？以及如何使用上述接口为 modal 指令定义控制器和模板？
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.
但是，作为初学者，我很难理解如果样本将所有内容都放在一个文件中而不分离关注点会发生什么。
回答by Juanjo
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 $scopehere, instead you can use resolve as shown in the angular-ui modal example.
由于您使用的是“controller as”语法，因此无需在$scope此处开始使用，而是可以使用 resolve，如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');
}
}
回答by basarat
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 ItemsListControllercontaining members shownDetails:ItemDetailModalController. Which means you don't need to come up with a messy way of sharing $scopeas its just a single $scope.
是的。我实际上认为模态是ItemsListController包含成员的扩展shownDetails:ItemDetailModalController。这意味着您不需要想出一种凌乱的共享方式，$scope因为它只是一个$scope.
And how can I define the controller and the template for the modal directive using the interfaces above?
以及如何使用上述接口为 modal 指令定义控制器和模板？
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:IModalServicecorresponds to what angular strap gives you : http://angular-ui.github.io/bootstrap/#/modal
哪里$modal:IModalService对应于什么角带给你：http: //angular-ui.github.io/bootstrap/#/modal
