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

angular-ui-bootstrap, angular-ui-router, angularjs, javascript

Solution

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.

Problem

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 `Error: [$injector:unpr] Unknown provider: $modalProvider <- $modal` ``` My app has the ui.bootstrap module injected - here is my application config var app = angular.module('app', ['ui.router', 'ui.bootstrap','ui.bootstrap.tpls', 'app.filters', 'app.services', 'app.directives', 'app.controllers']) // Gets executed during the provider registrations and configuration phase. Only providers and constants can be // injected here. This is to prevent accidental instantiation of services before they have been fully configured. .config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) { // UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router // ------------------------------------------------------------------------------------------------------------ $stateProvider .state('home', { url: '/', templateUrl: '/views/index', controller: 'HomeCtrl' }) .state('transactions', { url: '/transactions', templateUrl: '/views/transactions', controller: 'TransactionsCtrl' }) .state('login', { url: "/login", templateUrl: '/views/login', controller: 'LoginCtrl' }) .state('otherwise', { url: '*path', templateUrl: '/views/404', controller: 'Error404Ctrl' }); $locationProvider.html5Mode(true); }]) ``` I have reduced my controller to the following: ``` appControllers.controller('LoginCtrl', ['$scope', '$modal', function($scope, $modal) { $modal.open({templateUrl:'modal.html'}); }]); ``` Ultimately, what I am hoping to achieve is when login is required not actually GO to the login page, but bring up a dialog. I have also tried using the `onEnter` function in the `ui-router` state method. Couldn't get this working either. Any ideas? UPDATE Ok - so as it turns out, having both ui-bootstrap.js AND ui-bootstrap-tpls breaks this - After reading the docs I thought you needed the templates to work WITH the ui-bootstrap. though it seems all the plunkers only load in the ..tpls file - once I removed the ui-bootstrap file my modal works...Am i blind? or doesn't it not really say which one you need in the docs on github? - Now i just need to figure out how to prevent my url from actually going to /login, rather than just show the modal :) update 2 Ok, so by calling $state.go('login') in a service does this for me.

Original source

Related problems