Question

我正在使用angular ui router来打开一个模态ui对话框。

以下是脚本和我正在导入的CSS

<title>Pipeline Tracker | Home</title>
    <link rel="stylesheet" type="text/css" href="<c:url value="/views/js/bootstrap/css/bootstrap.min.css"/>">
    <link rel="stylesheet" type="text/css" href="<c:url value="/views/css/bootstrap-additions/dist/bootstrap-additions.css"/>">
    <link rel="stylesheet" type="text/css" href="<c:url value="/views/js/angularjs-toaster/toaster.min.css"/> ">
    <link rel="stylesheet" type="text/css" href="<c:url value="/views/js/ladda/dist/ladda-themeless.min.css"/>">
    <link rel="stylesheet" type="text/css" href="<c:url value="/views/css/font-awesome/css/font-awesome.css"/>">
    <link rel="stylesheet" type="text/css" href="<c:url value="/views/js/bootstrapvalidator/dist/css/bootstrapValidator.css"/>">                
    <link rel="stylesheet" type="text/css" href="<c:url value="/views/css/home.css"/>">

    <script type="text/javascript" src="<c:url value="/views/js/angular/angular.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/views/js/angular-resource/angular-resource.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/views/js/angular-animate/angular-animate.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/views/js/ngInfiniteScroll/build/ng-infinite-scroll.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/views/js/spin.js/spin.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/views/js/angular-spinner/angular-spinner.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/views/js/angular-auto-validate/dist/jcs-auto-validate.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/views/js/ladda/dist/ladda.min.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/views/js/angular-ladda/dist/angular-ladda.js"/>"></script>       
    <script type="text/javascript" src="<c:url value="/views/js/angular-strap/dist/angular-strap.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/views/js/angular-strap/dist/angular-strap.tpl.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/views/js/angularjs-toaster/toaster.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/views/js/ui-router/release/angular-ui-router.js"/>"></script>        
    <script type="text/javascript" src="<c:url value="/views/js/jquery-2.1.4.js"/>"></script>       
    <script type="text/javascript" src="<c:url value="/views/js/app.js"/>"></script>

他们已配置的依赖关系的方式是：

var app = angular.module('pipeline', [
    'ngResource',
    'infinite-scroll',
    'angularSpinner',
    'jcs-autoValidate',
    'angular-ladda',
    'mgcrea.ngStrap',
    'toaster',
    'ngAnimate',
    'ui.router'
]);

点击上的链接，我需要打开模式：

<div class="form-group">
    <a ui-sref="employees.update" class="btn btn-primary" role="button"><span class="fa fa-plus"></span> Add User</a>
</div>

这是配置状态提供程序：

app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
    .state('empty', {
        url: '/',
        views: {
            'main':{
                templateUrl: 'views/templates/empty.jsp',
                controller: 'EmptyController'
            }
        }
    })
    .state('employees',{
        url: '/admin/employees',
        views: {
            'main':{
                templateUrl: 'views/templates/employee.jsp',
                controller: 'AdminController'
            },
            'search':{
                templateUrl: 'views/templates/search-form.jsp',
                controller: 'AdminController'
            }
        }
    })
    .state('employees.update',{
        url: '/add',
        parent: 'employees',            
        onEnter: ['$stateParams', '$state', '$modal', '$resource', function($stateParams, $state, $modal, $resource){
            $modal.open({
                templateUrl: "views/templates/modal.edit.tpl.jsp",
                controller: ['$scope', function($scope){
                    console.log($scope.adminService.selectedEmployee);
                }]
            })
        }]
    });
    $urlRouterProvider.otherwise('/');
});

我得到的错误是$ modal.open不是函数

控制台上的堆栈跟踪

TypeError: $modal.open is not a function
at Object.$stateProvider.state.state.state.onEnter (app.js:41)
at Object.invoke (angular.js:4473)
at $state.transitionTo.$state.transition.resolved.then.$state.transition (angular-ui-router.js:3273)
at processQueue (angular.js:14634)
at angular.js:14650
at Scope.$get.Scope.$eval (angular.js:15916)
at Scope.$get.Scope.$digest (angular.js:15727)
at Scope.$get.Scope.$apply (angular.js:16024)
at angular.js:17791
at completeOutstandingRequest (angular.js:5490)

Answer 1

UI Bootstrap中提供了

$modal.open。您正在使用AngularStrap。

根据Strap's modal docs，没有open方法。你需要用

打开新的模态

$modal({
    templateUrl: "views/templates/modal.edit.tpl.jsp",
    controller: ['$scope', function($scope){
        console.log($scope.adminService.selectedEmployee);
    }]
})

angular ui router - 打开模态对话框

1 个答案: