angular-ui modal with typescript

私はangle-ui-bootstrapとtypescriptを使用してモーダルを作成しようとしています。私はこの例を次のlink（これはjQueryを使用しています）から引き出し、jQueryコードをtypescriptクラスに変換しました。angular-ui modal with typescript

モーダルを正しく開くことができましたが、モーダルのアイテムが表示されず、何らかの理由でボタンが機能しません。

以下のコードを参照してください。plunker

のindex.html：

<!doctype html> 
<html> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
<div ng-app="ui.bootstrap.demo" ng-controller="ModalDemoCtrl as c"> 
    <script type="text/ng-template" id="myModalContent.html"> 
     <div> 
      <div class="modal-header"> 
       <h3 class="modal-title">I'm a modal!</h3> 
      </div> 
      <div class="modal-body"> 
       <ul> 
        <li ng-repeat="item in i.items"> 
         <a ng-click="setSelected(item)">{{item}}</a> 
        </li> 
       </ul> 
       Selected: <b>{{selected}}</b> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-primary" ng-click="ok()">OK</button> 
       <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
      </div> 
     </div> 
    </script> 
    <button class="btn btn-default" ng-click="c.open()">Open me!</button> 
    <div ng-show="c.getSelected()">Selection from a modal: {{c.getSelected()}}</div> 
</div> 
</body> 
</html>

example.ts

angular 
    .module('ui.bootstrap.demo', ['ui.bootstrap']); 

class ModalDemoCtrl { 

    private selected: string; 

    static $inject = ['$modal']; 
    constructor(private $modal: ng.ui.bootstrap.IModalService) { 
    } 

    getSelected(): string { 
     return this.selected; 
    } 

    open(): void { 
     var modalInstance: ng.ui.bootstrap.IModalServiceInstance = this.$modal.open({ 
      templateUrl: 'myModalContent.html', 
      controller: 'ModalInstanceCtrl' 
     }); 

     modalInstance.result.then(function (selectedItem) { 
      this.selected = selectedItem; 
     }); 
    }; 
} 

angular 
    .module('ui.bootstrap.demo') 
    .controller('ModalDemoCtrl', ModalDemoCtrl); 

class ModalInstanceCtrl { 

    public items: string[] = ['item1', 'item2', 'item3']; 
    public selected: string = this.items[0]; 

    static $inject = ['$modalInstance']; 
    constructor(private $modalInstance: ng.ui.bootstrap.IModalServiceInstance) { 
    } 

    setSelected(item): void { 
     this.selected = item; 
    } 

    ok(): void { 
     this.$modalInstance.close(this.selected); 
    }; 

    cancel(): void { 
     this.$modalInstance.dismiss('cancel'); 
    }; 
} 

angular 
    .module('ui.bootstrap.demo') 
    .controller('ModalInstanceCtrl', ModalInstanceCtrl);

私は他人のためにそれを共有する作業コードを持っていたら。

ありがとうございました！

ゴンサロは

出典

2016-05-22 gmesorio

あなたは$スコープを使用していない場合は、「bindToController」オプションを使用する必要があります。 Here's作業例（htmlファイルとtsファイルの両方を更新）。も

modalInstance.result.then(function (selectedItem) { 
     this.selected = selectedItem; 
    })

適切な "この" 解像度

出典

2016-05-23 06:22:35

-1

おかげアレクセイため

modalInstance.result.then((selectedItem) => { 
     this.selected = selectedItem; 
    })

する必要があります！あなたの変更は完全に機能します！私は今日最後のコードをアップロードして、最終版が他の人にも利用できるようにします。

UPDATE：ここでは、最終的なコードが機能している:)

example.js

angular 
.module("ui.bootstrap.demo", ["ui.bootstrap"]); 

class ModalDemoCtrl { 
    private selected: string; 

    static $inject = ["$modal"]; 
    constructor(private $modal: ng.ui.bootstrap.IModalService) { 
    } 

    getSelected(): string { 
     return this.selected; 
    } 

    open(): void { 
     var modalInstance: ng.ui.bootstrap.IModalServiceInstance = this.$modal.open({ 
     templateUrl: "myModalContent.html", 
     controller: "ModalInstanceCtrl", 
     bindToController: true, 
     controllerAs: "i", 
    }); 

    modalInstance.result.then((selectedItem) => { 
     this.selected = selectedItem; 
    }); 
}; 
} 

angular 
.module("ui.bootstrap.demo") 
.controller("ModalDemoCtrl", ModalDemoCtrl); 

class ModalInstanceCtrl { 
    public items: string[] = ["item1", "item2", "item3"]; 
    public selected: string = this.items[0]; 

    static $inject = ["$modalInstance"]; 
    constructor(private $modalInstance: ng.ui.bootstrap.IModalServiceInstance) { 
    } 

    setSelected(item): void { 
     this.selected = item; 
    } 

    ok(): void { 
     this.$modalInstance.close(this.selected); 
    }; 

    cancel(): void { 
     this.$modalInstance.dismiss("cancel"); 
    }; 
} 

angular 
    .module("ui.bootstrap.demo") 
    .controller("ModalInstanceCtrl", ModalInstanceCtrl);

index.htmlを

<!doctype html> 
<html> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
<div ng-app="ui.bootstrap.demo" ng-controller="ModalDemoCtrl as c"> 
    <script type="text/ng-template" id="myModalContent.html"> 
     <div> 
      <div class="modal-header"> 
       <h3 class="modal-title">I'm a modal!</h3> 
      </div> 
      <div class="modal-body"> 
       <ul> 
        <li ng-repeat="item in i.items"> 
         <a ng-click="i.setSelected(item)">{{item}}</a> 
        </li> 
       </ul> 
       Selected: <b>{{i.selected}}</b> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-primary" ng-click="i.ok()">OK</button> 
       <button class="btn btn-warning" ng-click="i.cancel()">Cancel</button> 
      </div> 
     </div> 
    </script> 
    <button class="btn btn-default" ng-click="c.open()">Open me!</button> 
    <div ng-show="c.getSelected()">Selection from a modal: {{c.getSelected()}}</div> 
</div> 
</body> 
</html>

出典

2016-05-23 09:16:31 gmesorio

angular-ui modal with typescript

答えて

関連する問題