使用打字稿的angular-ui模式

我正在嘗試使用angular-ui-bootstrap和打字稿創建模式。我從以下link（它使用jQuery）中抽取了示例，並將jQuery代碼轉換爲打字稿類。使用打字稿的angular-ui模式

我能夠正確打開模式，但模式中的項目不顯示，並且按鈕由於某種原因而不工作。

請參閱下面的代碼或在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; 
    })

應該

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

適當「這個」決議

來源

2016-05-23 06:22:35

-1

感謝阿列克謝！您的更改完美無缺！我將上傳今天晚些時候的最終代碼，以便其他人也可以使用最終版本。

更新：這裏是最後的代碼工作:)

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模式

回答

相關問題