弹出式引导+棱角分明

Pop-up bootstrap + angular

本文关键字：弹出式      更新时间：2023-11-07

我正在尝试使用网页中弹出的引导程序。我已经在我的应用程序中包含了所有必要的文件，但我在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>

这是我的主要角度模块：

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
        });
    }
  }]);

看起来$modal服务导入正确；一定要调用函数来打开它。

试试这个：

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