angularjs - angular ui router - open modal dialog -
i using angular ui router open modal ui dialog.
following scripts , css 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 have configured dependencies are:
var app = angular.module('pipeline', [ 'ngresource', 'infinite-scroll', 'angularspinner', 'jcs-autovalidate', 'angular-ladda', 'mgcrea.ngstrap', 'toaster', 'nganimate', 'ui.router' ]); here link on click of need 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 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 getting $modal.open not function
stack trace on console
typeerror: $modal.open not function @ object.$stateprovider.state.state.state.onenter (app.js:41) @ object.invoke (angular.js:4473) @ $state.transitionto.$state.transition.resolved.then.$state.transition (angular-ui-router.js:3273) @ processqueue (angular.js:14634) @ angular.js:14650 @ scope.$get.scope.$eval (angular.js:15916) @ scope.$get.scope.$digest (angular.js:15727) @ scope.$get.scope.$apply (angular.js:16024) @ angular.js:17791 @ completeoutstandingrequest (angular.js:5490)
$modal.open available in ui bootstrap. using angularstrap.
according strap's modal docs there no open method. need open new modal
$modal({ templateurl: "views/templates/modal.edit.tpl.jsp", controller: ['$scope', function($scope){ console.log($scope.adminservice.selectedemployee); }] }) 
Comments
Post a Comment