角モーダルサービスが表示されない

Question

ウェブアプリケーションにangular modal serviceを設定しようとしていますが、自分のボタンをクリックしても表示されません。私は間違って何をしていますか？それはね

ビルダービュー

<div ng-controller="BuilderController as vm"> 
    <button type="button" class="btn btn-success" ng-click="vm.showExportModal()">Export</button> 
</div> 

ビルダーコントローラ

angular.module('myWebApp') 
    .controller('BuilderController', function ($scope, BuilderService) {  
    var vm = this; 

    vm.showExportModal = function() { 
     BuilderService.showExportModal(); 
    }; 
    }); 

ビルダーサービス

angular.module('myWebApp') 
    .service('BuilderService', function (ModalService) { 

    var builderService = { 
     showExportModal: showExportModal 
    }; 
    return builderService; 

    function showExportModal() { 
     ModalService.showModal({ 
     template: "<div>Fry lives in {{futurama.city}}</div>", 
     controller: function() { 
      this.city = "New New York"; 
     }, 
     controllerAs : "futurama" 
     }) 
    }; 

    }); 

Answer 1

このスニペットでうまく動作するようにするには、アプリに依存するものとして注入したことを確認することをお勧めします。

指示に指定したテンプレートの代わりにモーダルを表示するには、正しいモーダルテンプレートが必要です。

angular.module('myWebApp', ['angularModalService']); 
 

 
angular.module('myWebApp') 
 
    .controller('BuilderController', function($scope, BuilderService) { 
 
    var vm = this; 
 

 
    vm.showExportModal = function() { 
 
     BuilderService.showExportModal(); 
 
    }; 
 
    }); 
 

 
angular.module('myWebApp') 
 
    .service('BuilderService', function(ModalService) { 
 

 
    var builderService = { 
 
     showExportModal: showExportModal 
 
    }; 
 
    return builderService; 
 

 
    function showExportModal() { 
 
     ModalService.showModal({ 
 
     template: "<div>Fry lives in {{futurama.city}}</div>", 
 
     controller: function() { 
 
      this.city = "New New York"; 
 
     }, 
 
     controllerAs: "futurama" 
 
     }) 
 
    }; 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<script src="http://dwmkerr.github.io/angular-modal-service/angular- 
 
modal-service.js"></script> 
 

 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div ng-app="myWebApp"> 
 
    <div ng-controller="BuilderController as vm"> 
 
    <button type="button" class="btn btn-success" ng-click="vm.showExportModal()">Export</button> 
 
    </div> 
 
</div>