Der Versuch, ModalService zu verwenden. Getting "ModalService ist undefined" Fehler

Question

Ich habe Jquery, Bootstrap, Angularjs und Modalservice in der richtigen Reihenfolge geladen. Ich erhalte den Fehler: "ModalService ist undefiniert". Auch wenn der ModalService korrekt geladen wurde. Kann jemand bitte helfen Sie mir zu verstehen, was falsch ist:

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

richtig Ihre Abhängigkeit injizieren.

In Ihrem Controller hinzugefügt "ModalService" Abhängigkeit.

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

Hinweis:

ich für modal Service Winkel ui-Bootstrap zu verwenden anstelle von separaten Plugin sehr empfehlen. Es bietet viele praktische Optionen, um Modal entsprechend Ihrer Anforderung zu konfigurieren.

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

hoffe, das hilft!