typescriptでangular-ui-bootstrap（modals）を使用するには？

Question

私はモーダルを使用してテーブルからいくつかのデータを編集したいと思います。 angle-ui-bootstrapのtypescript定義には、definitelyTypedからのさまざまなインターフェースがありますが、それらは文書化されていませんし、それらを使用する方法の例も見つけることができません。

• IModalScope
• IModalService
• IModalServiceInstance
• IModalSettings
• 私が達成したいのですがどのようなIModalStackService

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

は次のようなものです：

私は右ItemsListControllerとItemDetailModalController両方がデータを交換するために、同じスコープのインスタンスを必要とすることを想定しているだろうか？そして、上記のインターフェースを使用してモーダルディレクティブのコントローラとテンプレートをどのように定義すればよいですか？

は、私はすでにここで、この非typescriptです例が見つかりました： https://angular-ui.github.io/bootstrap/#/modal

しかし、初心者として、私はサンプルが懸念を分離することなく、1つのファイルにすべてを投げた場合に何が起こっているのか理解に苦労を持っています。

Answer 1

データを交換するためにItemsListControllerとItemDetailModalControllerの両方に同じスコープのインスタンスが必要と思われるのは正しいですか？

はい。私は実際にはItemsListControllerのメンバーとしてshownDetails:ItemDetailModalControllerを含む拡張としてモーダルを考える。つまり、$scopeをちょうど1つとして共有するという面白い方法を考え出す必要はありません。$scope

上記のインターフェイスを使用してモーダルディレクティブのコントローラとテンプレートをどのように定義できますか？

これは私が（あなたがスコープを共有していることに注意してください）持っているものです：

$modal:IModalServiceは角ストラップがあなたに与えられるものに対応

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

：http://angular-ui.github.io/bootstrap/#/modal

Answer 2

を角度によって注入インスタンスになりますタイプng.ui.bootstrap.IModalServiceです。

「コントローラとして」構文を使用しているため、ここで$scopeを使用する必要はありません。代わりにangular-ui modal exampleに示すようにresolveを使用できます。

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