ModalServiceを使用しようとしています。 "ModalService is undefined"エラーを取得する

Question

jquery、bootstrap、angularjs、modalserviceを正しい順序でロードしました。私はエラーを取得しています： "ModalServiceは未定義です"。 ModalServiceが正しくロードされているにもかかわらず。誰かが間違っているかを理解するために私を助けてくださいすることができます

app.js: 
 
var myApp=angular.module('App',['ngRoute','listApp']); 
 
myApp.config(function($routeProvider) { 
 
\t $routeProvider 
 
\t .when('/', { 
 
     templateUrl: 'list.html', 
 
     controller: 'listCtrl' 
 
    }) 
 
\t .otherwise({ 
 
     templateUrl: 'list.html', 
 
     controller: 'listCtrl' 
 
    }); 
 
}); 
 

 
controllers.js: 
 
var listApp=angular.module('listApp',['angularModalService']); 
 
listApp.controller('listCtrl', ['$scope', function(scope,ModalService){ 
 
scope.show = function() { 
 
ModalService.showModal({ 
 
\t templateUrl: 'modal.html', 
 
\t controller: "ModalController" 
 
}).then(function(modal) { 
 
\t modal.element.modal(); 
 
\t modal.close.then(function(result) { 
 
\t \t scope.message = "You said " + result; 
 
\t }); 
 
}); 
 
}; 
 
}]); 
 
listApp.controller('ModalController', function(scope, close) { 
 
scope.close = function(result) { 
 
close(result, 500); 
 
}; 
 
});

index.html: 
 
<link rel="stylesheet" href="css/bootstrap.css"/> 
 
<link rel="stylesheet" href="css/index.css"/> 
 
<script type="text/javascript" src="js/jquery.min.js"></script> 
 
<script type="text/javascript" src="js/bootstrap.js"></script> 
 
<script type="text/javascript" src="js/angular.js"></script> 
 
<script type="text/javascript" src="js/angular-routing.js"></script> 
 
<script type="text/javascript" src="js/app.js"></script> 
 
<script type="text/javascript" src="js/controllers.js"></script> 
 
<script type="text/javascript" src="js/index.js"></script> 
 
<script type="text/javascript" src="js/angular-modal-service.js"></script> 
 

 
list.html: 
 
<div ng-app="listApp" ng-controller="listCtrl"> 
 
<a class="btn btn-default" href ng-click="show()">Show a Modal</a> 
 
<script type="text/ng-template" id="modal.html"> 
 
<div class="modal fade"> 
 
    <div class="modal-dialog"> 
 
\t <div class="modal-content"> 
 
\t <div class="modal-header"> 
 
\t \t <button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
\t \t <h4 class="modal-title">Yes or No?</h4> 
 
\t </div> 
 
\t <div class="modal-body"> 
 
\t \t <p>It's your call...</p> 
 
\t </div> 
 
\t <div class="modal-footer"> 
 
\t \t <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button> 
 
\t \t <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button> 
 
\t </div> 
 
\t </div> 
 
    </div> 
 
</div> 
 
</script> 
 
</div>

Answer 1

は適切にあなたの依存関係を注入します。

コントローラに「ModalService」依存関係が追加されました。

listApp.controller('listCtrl', ["$scope", "ModalService", function(scope, ModalService){ 
}]); 

注：

私は非常代わりに、別のプラグインのモーダルサービスのための角度UI-ブートストラップを使用することをお勧めします。それはあなたの要件に応じてモーダルを設定するための多くの便利なオプションのパラメータを提供します。

https://angular-ui.github.io/bootstrap/#/modal

はこれが役に立てば幸い！