opening a modal in a route in AngularJS with angular-ui-bootstrap

Question

I am trying to do what was essentially answered here Unable to open bootstrap modal window as a route

Yet my solution just will not work. I get an error

Answer 1

I found a handy hint to get this working. There are probably caveats, but it works for me. You can pass a result still but I have no need for one.

Using finally instead of the then promise resolve sorted this for me. I also had to store the previous state on rootScope so we knew what to go back to.

Save previous state to $rootScope

$rootScope.previousState = 'home';
$rootScope.$on('$stateChangeSuccess', function(ev, to, toParams, from, fromParams){
    $rootScope.previousState = from.name;
})

State using onEnter

$stateProvider.state('contact', {
    url: '/contact',
    onEnter: function ($state, $modal, $rootScope){
        $modal.open({
            templateUrl: 'views/contact.html',
            controller: 'ContactCtrl'
        }).result.finally(function(){
            $state.go($rootScope.previousState);
        })
    }
});

Answer 2

Hi I had a hard time getting through the similar problem. However, I was able to resolve it. This is what you would probably need.

app.config(function($stateProvider) {
  $stateProvider.state("managerState", {
      url: "/ManagerRecord",
      controller: "myController",
      templateUrl: 'index.html'
    })
    .state("employeeState", {
      url: "empRecords",
      parent: "managerState",
      params: {
        empId: 0
      },
      onEnter: [
        "$modal",
        function($modal) {
          $modal.open({
            controller: "EmpDetailsController",
            controllerAs: "empDetails",
            templateUrl: 'empDetails.html',
            size: 'sm'
          }).result.finally(function() {
            $stateProvider.go('^');
          });
        }
      ]
    });
});

Click here for plunker. Hope it helps.

Answer 3

I'm working on something similar and this is my solution.

HTML code

<a ui-sref="home.modal({path: 'login'})" class="btn btn-default" ng-click="openModal()">Login</a>

State configuration

$stateProvider
  // assuming we want to open the modal on home page
  .state('home', {
    url: '/',
    templateUrl: '/views/index',
    controller: 'HomeCtrl'
  })
  // create a nested state
  .state('home.modal', {
    url: ':path/'
  });

Home controller

//... other code
$scope.openModal = function(){
  $modal.open({
    templateUrl: 'path/to/page.html',
    resolve: {
            newPath: function(){
                return 'home'
            },
            oldPath: function(){
                return 'home.modal'
            }
        },
    controller: 'ModalInstanceController'
  });
};
//... other code

Finally, the modal instance controller. This controller synchronizes the modal events (open/close) with URL path changes.

angular.module("app").controller('ModalInstanceController', function($scope,    $modalInstance, $state, newPath, oldPath) {
    $modalInstance.opened.then(function(){
        $state.go(newPath);
    });
    $modalInstance.result.then(null,function(){
        $state.go(oldPath);
    });
    $scope.$on('$stateChangeSuccess', function () {
        if($state.current.name != newPath){
            $modalInstance.dismiss('cancel')
        }
    });
});

Answer 4

You may create a state with the same templateUrl and controller as your page where you want to show the modal, adding params object to it

$stateProvider
    .state('root.start-page', {
        url: '/',
        templateUrl: 'App/src/pages/start-page/start-page.html',
        controller: 'StartPageCtrl'
    })
    .state('root.login', {
        url: '/login',
        templateUrl: 'App/src/pages/start-page/start-page.html',
        controller: 'StartPageCtrl',
        params: {
            openLoginModal: true
        }
    })

And in controller of the page, use this parameter to open the modal

.controller("StartPageCtrl", function($scope, $stateParams) {
    if ($stateParams.openLoginModal) {
        $scope.openLoginModal();
    }