javascript - ¿Cómo usar angular-ui-bootstrap (modales) en typescript?

Me gustaría editar algunos datos de una tabla usando un modal. Hay varias interfaces en las definiciones de TypeScript para angular-ui-bootstrap de definitelyTyped, sin embargo, no están documentadas y no puedo encontrar ningún ejemplo sobre cómo usarlas.

• IModalScope
• IServicioModal
• InstanciaDeServicioIModal
• ConfiguraciónModal
• IServicioPilaModal

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

Lo que me gustaría lograr es algo así:

¿Estoy en lo cierto al suponer que tanto ItemsListController como ItemDetailModalController necesitan una instancia del mismo scope para poder intercambiar los datos? ¿Y cómo puedo definir el controlador y la plantilla para la directiva modal usando las interfaces anteriores?

Ya encontré este ejemplo que no es de TypeScript aquí: https://angular-ui.github.io/bootstrap/#/modal

Sin embargo, como principiante me cuesta entender lo que está pasando si las muestras ponen todo en un solo archivo sin separar las preocupaciones.

Respuesta #1

La instancia inyectada por Angular será del tipo ng.ui.bootstrap.IModalService.

Y dado que estás utilizando la sintaxis «controller as», no hay necesidad de empezar a usar $scope aquí, en su lugar puedes usar resolve como se muestra en el ejemplo del modal de angular-ui.

Aquí está el código de ejemplo:

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