Pop-up bootstrap + angular

Question

Я пытаюсь использовать всплывающее окно bootstrap на моей веб-странице. Я включил все необходимые файлы в моем приложении, но я получаю это исключение в Firebug консоли:

Error: $modal is not a function $scope.addBook@http://localhost:8080/engineering-project-web/resources/angular-app/navigation_bar/naviBarCtrl.js:7:18 $parseFunctionCall@http://localhost:8080/engineering-project-web/resources/libs/angular.js:12332:15 ngEventHandler/</callback@http://localhost:8080/engineering-project-web/resources/libs/angular.js:21389:17 $RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:8080/engineering-project-web/resources/libs/angular.js:14384:16 $RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:8080/engineering-project-web/resources/libs/angular.js:14483:18 ngEventHandler/<@http://localhost:8080/engineering-project-web/resources/libs/angular.js:21394:17 n.event.dispatch@http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js:3:6392 n.event.add/r.handle@http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js:3:3202 

Есть мои все включенные скрипты:

<script src="<c:url value="/resources/libs/jquery.js" />"></script> 

     <!-- Angular Scripts --> 
     <script src="<c:url value="/resources/libs/angular.js" />"></script> 
     <script src="<c:url value="/resources/libs/angular-animate.min.js" />"></script> 
     <script src="<c:url value="/resources/libs/angular-route.js" />"></script> 
     <script src="<c:url value="/resources/libs/angular-resource.js" />"></script> 

     <!-- Bootstrap --> 
     <script src="<c:url value="/resources/libs/jquery-ui.custom.min.js" />"></script> 
     <script src="<c:url value="/resources/libs/bootstrap.js"/>"></script> 
     <script src="<c:url value="/resources/libs/ui-bootstrap.js"/>"></script>  

     <!-- Controlers --> 
     <script src="<c:url value="/resources/angular-app/main/AppCtrl.js" />"></script> 
     <script src="<c:url value="/resources/angular-app/home/homeCtrl.js" />"></script> 
     <script src="<c:url value="/resources/angular-app/navigation_bar/naviBarCtrl.js" />"></script> 

     <!-- Services --> 
     <script src="<c:url value="/resources/angular-app/home/homeSrvc.js" />"></script> 

     <!-- Directives --> 
     <script src="<c:url value="/resources/angular-app/main/directives.js" />"></script> 

     <!-- CSS --> 
     <link type="text/css" rel="stylesheet" href="<c:url value="/resources/css/main.css" />" /> 
     <link type="text/css" rel="stylesheet" href="<c:url value="/resources/angular-app/home/home.css" />" /> 
     <link type="text/css" rel="stylesheet" href="<c:url value="/resources/css/bootstrap.css"/>"> 
     <link type="text/css" rel="stylesheet" href="<c:url value="/resources/css/bootstrap-theme.css"/>"> 

     <!-- IE --> 
     <script src="<c:url value="/resources/libs/html5.js" />"></script> 
     <script src="<c:url value="/resources/libs/respond.js" />"></script> 
     <script src="<c:url value="/resources/libs/css3-mediaqueries.js" />"></script> 

Это модуль моего основного ANGULAR в:

var appModule = angular.module('frontendApp', ['ngRoute', 'ui.bootstrap']); 


appModule.controller('AppCtrl' , ['$scope', function($scope) { 
    $scope.init = function() { 
     $scope.baseUrl = "/engineering-project-web/resources/angular-app"; 
    }; 
}]); 

И это контроллер, в котором я пытаюсь включить всплывающее окно.

appModule.controller('NaviBarCtrl', ['$scope', '$modal', function ($scope, $modal) { 

    $scope.addBook = function(){ 
     $scope.popup = $modal({ 
      scope : $scope, 
      template : 'resources/angular-app/popups/AddTrainingUser.html', 
      show : true 
     }); 
    } 

    }]); 

Answer 1

Похоже, что ваш $ модальный сервис импортирован правильно; убедитесь, что вы вызываете функцию для ее открытия.

Попробуйте это:

$scope.popup = $modal.open({ 
     scope : $scope, 
     template : 'resources/angular-app/popups/AddTrainingUser.html', 
     show : true 
    });