CODEWITHSUNDEEP
htmlangularjsangular-ui-routerangular-ui-bootstrap
RVR
RVR

Reputation: 97

Angular UI-Router routing configuration not working

I am using UI-Router to do the routing for my new application.I have my state defined for home page. I have link in my page for "Sign Up" which needs to open as a modal window as separate state and i am using "onEnter" to trigger the modal window . When a user clicks the close button of modal window, i want the user to be re-directed to home page state. I am able to route back to home state using "ui-sref" but not able to close the modal window. I tried using data-dismiss="modal". Am i doing anything wrong?

Below is the configuration i am trying:

index.html

<!DOCTYPE html>
<html>
   <head lang="en">
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
      <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
      <meta http-equiv="Pragma" content="no-cache" />
      <meta http-equiv="Expires" content="0" />
      <title>Idea Generation App</title>
      <!-- inject:css -->
      <link rel="stylesheet" href="app/styles/css/bootstrap.min.css">
      <link rel="stylesheet" href="app/styles/css/ideaManagementUI.css">

      <!-- endinject -->
   </head>

   <body ng-app="app">

   <div id="mainContainer">

        <div id="ideaDriveImgContainer" class="backgroundSize">
         <img id="ideaDriveImg" class="backgroundSize">
        </div>   

        <div ui-view></div>

  </div>

      <!-- bower:js -->
      <script src="bower_components/angular/angular.js"></script>
      <script src="bower_components/angular-route/angular-route.js"></script>
      <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
      <script src="bower_components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js"></script>
      <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
      <!-- endinject -->
      <!-- inject:js -->
      <script src="app/scripts/module/app.js"></script>
      <script src="app/scripts/controllers/IdeaMgmtMainController.js"></script>

      <!-- endinject -->
   </body>

</html>

ideaMgmt-landing.html(html for my homepage)

<div id="signUpContainer" style="cursor: pointer;">
   <div id="signUpArea" class="text">
      <a ui-sref="signUp"><span>SignUp</span></a> //to trigger the signUp state
   </div>
</div>

signUpModal.html

 <div id="close" class="ax_shape">
            <a ui-sref="home">
            <button type="button" class="close" aria-label="Close" data-dismiss="modal">
                <span aria-hidden="true">&times;</span>
            </button></a>

    </div>

app.js (route-configuration)

(function(){
    'use strict';
    var App = angular.module('app', ['ui.router','ui.bootstrap']);

    App.config(function($stateProvider, $urlRouterProvider) {

        $stateProvider.state('home', {
            url:'/home',
            templateUrl:'app/views/ideaMgmt-landing.html' ,
            controller: 'IdeaMgmtMainController'
        }),
        $stateProvider.state('signUp', {
            url: '/signUp',
         // trigger the modal to open when this route is active
            onEnter: ['$stateParams', '$state', '$modal',
              function($stateParams, $state, $modal) {
                 // handle modal open
                $modal.open({
                    templateUrl: 'app/views/modalTemplates/signUpModal.html',

                  });
               }]
        });

        $urlRouterProvider.otherwise('/home');
    });
}
());

Upvotes: 0

Views: 211

Answers (1)

Daniel
Daniel

Reputation: 6481

You can add a controller to your modal:

$modal.open({
    templateUrl: 'app/views/modalTemplates/signUpModal.html',
    controller: 'signupModalCtrl'
});

And do the closing and state change from there:

angular.module('app').controller('signupModalCtrl', 
     function($uibModalInstance, $state){
         $scope.close = function(){
             $uibModalInstance.dismiss('cancel');
             $state.go('home');
         };
});

HTML:

<a ng-click="close()">
  <button type="button" class="close" aria-label="Close">
       <span aria-hidden="true">&times;</span>
  </button>
</a>

Upvotes: 1

Related Questions