web-dev-qa-db-ja.com

typescriptでangular-ui-bootstrap（モーダル）を使用するにはどうすればよいですか？

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

  • IModalScope
  • IModalService
  • IModalServiceInstance
  • IModalSettings
  • IModalStackService

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

私が達成したいのは次のようなものです：

layout

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

私はすでにこの非TypeScriptの例をここで見つけました： https://angular-ui.github.io/bootstrap/#/modal

ただし、初心者として、サンプルが懸念事項を分離せずにすべてを1つのファイルにスローすると、何が起こっているのかを理解するのに苦労します。

javascriptangularjstypescriptangular-uiangular-ui-bootstrap
10
xvdiff

angularによって注入されたインスタンスは、タイプng.ui.bootstrap.IModalServiceになります。

また、「controller as」構文を使用しているため、ここで$scopeの使用を開始する必要はありません。代わりに、 angular-uiモーダルの例 に示すように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');
    }
}
21
Juanjo

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

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

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

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

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

ここで、$modal:IModalServiceはangularストラップが提供するものに対応します： http://angular-ui.github.io/bootstrap/#/modal

1
basarat