Comment utiliser angular-ui-bootstrap (modals) en tapuscrit?

J'aimerais modifier certaines données d'une table à l'aide d'un modal. Il existe plusieurs interfaces dans le fichier d'enregistrement des définitions pour angular-ui-bootstrap à partir de definitelyTyped, mais ils sont sans papiers et je ne suis pas en mesure de trouver des exemples sur la façon de les utiliser.

IModalScope
IModalService
IModalServiceInstance
IModalSettings
IModalStackService

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

Ce que je voudrais obtenir quelque chose comme ceci:

Suis-je en droit de supposer que les deux ItemsListController et ItemDetailModalController besoin d'une instance de la même portée afin d'échanger les données? Et comment puis-je définir le contrôleur et le modèle de la modale de la directive en utilisant les interfaces ci-dessus?

J'ai déjà trouvé ce non-tapuscrit exemple ici: https://angular-ui.github.io/bootstrap/#/modal

Cependant, en tant que débutant, j'ai du mal à comprendre ce qui se passe si les échantillons de jeter le tout dans un seul fichier, sans séparer les préoccupations.

source d'informationauteur xvdiff

L'instance introduite par angulaire sera de type ng.ui.bootstrap.IModalService.

Et puisque vous êtes à l'aide de "contrôleur" de la syntaxe, il n'est pas nécessaire pour commencer à utiliser $scope ici, au lieu de cela, vous pouvez utiliser le résoudre, comme indiqué dans le angular-ui modal exemple.

Voici l'exemple de 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');
    }
}

1

Suis-je en droit de supposer que les deux ItemsListController et ItemDetailModalController besoin d'une instance de la même portée afin d'échanger les données?

Oui. Je pense en fait que des auxiliaires modaux comme une extension de ItemsListController contenant des membres shownDetails:ItemDetailModalController. Ce qui signifie que vous n'avez pas besoin de venir avec un désordre de partage $scope comme un seul $scope.

Et comment puis-je définir le contrôleur et le modèle de la modale de la directive en utilisant les interfaces ci-dessus?

C'est ce que j'ai (notez que vous êtes le partage de la portée):
```
            this.$modal.open({
                templateUrl: 'path/To/ItemModalDetails.html',
                scope: this.$scope,
            })
```
Où $modal:IModalService correspond à ce angulaire de la sangle vous donne : http://angular-ui.github.io/bootstrap/#/modal

Vous devez vous connecter pour publier un commentaire.