Come usare angular-ui-bootstrap (modali) in dattiloscritto?

Question

Vorrei modificare alcuni dati da una tabella utilizzando una modale. Ci sono varie interfacce nelle definizioni di dattiloscritto per angular-ui-bootstrap da definitelyTyped, tuttavia non sono documentate e non sono in grado di trovare alcun esempio su come usarle.

• IModalScope
• IModalService
• IModalServiceInstance
• IModalSettings
• IModalStackService

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

Quello che mi piacerebbe realizzare è qualcosa di simile:

ho ragione di ritenere che sia ItemsListController e ItemDetailModalController hanno bisogno di un'istanza della stessa portata, al fine di scambiare i dati? E come posso definire il controller e il modello per la direttiva modale usando le interfacce sopra?

ho già trovato questo esempio non dattiloscritto qui: https://angular-ui.github.io/bootstrap/#/modal

Tuttavia, come un principiante ho difficoltà a capire cosa sta succedendo, se i campioni buttare tutto in un unico file senza separare le preoccupazioni.

Answer 1

Ho ragione di ritenere che sia ItemsListController che ItemDetailModalController necessitino di un'istanza dello stesso ambito per scambiare i dati?

Sì. In realtà penso alle modali come un'estensione di ItemsListController contenente membri shownDetails:ItemDetailModalController. Il che significa che non è necessario trovare un modo disordinato per condividere $scope come un solo $scope.

E come è possibile definire il controller e il modello per la direttiva modale utilizzando le interfacce sopra?

Questo è quello che ho (nota che state ripartendo la portata): http://angular-ui.github.io/bootstrap/#/modal

Answer 2

L'istanza iniettata angolare saranno:

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

Dove $modal:IModalService corrisponde a quello della cinghia angolare si dà di tipo ng.ui.bootstrap.IModalService.

E poiché si utilizza la sintassi "controller come", non è necessario iniziare a utilizzare $scope qui, invece è possibile utilizzare la risoluzione come mostrato nello angular-ui modal example.

Ecco il codice di esempio:

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