javascript - 尝试使用ModalService。出现“ModalService未定义”错误

我已经以正确的顺序加载了jquery，bootstrap，angularjs和modalservice。我收到错误消息：“未定义ModalService”。即使ModalService已正确加载。有人可以帮助我了解问题所在吗：

app.js:
var myApp=angular.module('App',['ngRoute','listApp']);
myApp.config(function($routeProvider) {
	 $routeProvider
	 .when('/', {
        templateUrl: 'list.html',
        controller: 'listCtrl'
    })
	.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({
	templateUrl: 'modal.html',
	controller: "ModalController"
}).then(function(modal) {
	modal.element.modal();
	modal.close.then(function(result) {
		scope.message = "You said " + result;
	});
});
};
}]);
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">
	<div class="modal-content">
	  <div class="modal-header">
		<button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h4 class="modal-title">Yes or No?</h4>
	  </div>
	  <div class="modal-body">
		<p>It's your call...</p>
	  </div>
	  <div class="modal-footer">
		<button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
		<button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
	  </div>
	</div>
  </div>
</div>
</script>
</div>

最佳答案

正确注入您的依赖关系。

在您的控制器中添加了“ ModalService”依赖项。

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

注意：

我强烈建议对模式服务使用angular ui-bootstrap，而不要使用单独的插件。它提供了许多方便的选项参数来根据您的要求配置模态。

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

希望这可以帮助！

关于javascript - 尝试使用ModalService。出现“ModalService未定义”错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39221020/