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

희망!