angular ui router - open modal dialog

Question

I am using angular ui router to open a modal ui dialog.

following are the scripts and css i am importing

<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>

they way I have configured dependencies are:

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

here is the link on click of which I need to open modal:

<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>

here is the state provider configured:

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('/');
});

there error here I am getting is $modal.open is not a function

Stack Trace on Console

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)

fracz · Accepted Answer · 2015-08-19 22:46:34Z

2

$modal.open is available in UI Bootstrap. You are using AngularStrap.

According to Strap's modal docs there is no open method. You need to open new modal with

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

answered Aug 19, 2015 at 22:46

$fracz's user avatar$

fracz

21.4k18 gold badges109 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Priyank Thakkar Over a year ago

Thank you fracz. You are right. I wasn't aware of dialog being from AngularStrap doesn't have open modal. I tried with showModal, but that too failed.

Collectives™ on Stack Overflow

angular ui router - open modal dialog

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related