Как использовать угло-ui-bootstrap (модальные) в машинописном тексте?

Question

Я хотел бы отредактировать некоторые данные из таблицы с помощью модального. Существуют различные интерфейсы в определениях типов для angular-ui-bootstrap from definTyped, однако они недокументированы, и я не могу найти примеров того, как их использовать.

• 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

Однако, как новичок я получил трудно понять, что происходит, если образцы бросить все в одном файле без разделения проблем.

Answer 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

Answer 2

Экземпляр впрыскивается угловой будет типа ng.ui.bootstrap.IModalService.

И поскольку вы используете синтаксис «контроллер как», здесь не нужно начинать использовать $scope, вместо этого вы можете использовать разрешение, как показано на рисунке angular-ui modal example.

Вот пример кода:

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