Nested views inside angular ui bootstrap modal

Question

Here is the entrypoint of my angularjs application. What I'm trying to create is an modal with multiple views.

(function() {
  'use strict';

  angular
    .module('app', ['ui.router', 'ui.bootstrap'])
    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('modal', {
          url: '/modal',
          onEnter: ['$stateParams', '$state', '$modal', function ($stateParams, $state, $modal) {
            $modal.open({
              templateUrl: 'partials/modal.html',
              backdrop: 'static'
            });
          }]
        })
        .state('modal.models', {
          url: '/models',
          templateUrl: 'partials/modal.models.html'
        });
    })
    .run(function ($rootScope) {
      $rootScope.$on("$stateChangeError", console.log.bind(console));
    });
}());

and this is the main view

<!-- Modal -->
<div id="myModal">
  <div class="modal-header">
    <h2>Select your own car</h2>
  </div>
  <div class="modal-body">
    <h4>Brands</h4>
    <a ui-sref="modal.models">Models</a>
    <div ui-view></div>
  </div>
</div>

My problem is that when I click on the link ui-sref nothing happens. Why ui-router doesn't work inside a modal? I should pass in the second view that is the following named modal.models.html

<div>
  <h1>Hello</h1>
</div>

possible duplicate of [Using ui-router with Bootstrap-ui modal](http://stackoverflow.com/questions/24713242/using-ui-router-with-bootstrap-ui-modal) — Betty St, May 26 '15 at 20:37
I think the problem is that the child state will again open the modal with ``partials/modal.html`` from the parent ``onEnter`` function! That's why I thought http://stackoverflow.com/a/24726331/595152 can help you. — Betty St, May 28 '15 at 13:51

score 0 · Answer 1 · answered Jul 25 '15 at 02:49

For those like me that stumble along later, here's another path:

This plunker uses a simple CSS modal (rather than the fancy ui-bootstrap one) to accomplish the same end result --with the additional perk of 'sticky states' that persist underneath the modal interaction. Note that this supports substates within the modal in a uirouter-kosher way.

$stateProvider.state('modal', {
      url: '/modal',
      views: {
        'modal': {
          templateUrl: 'modal.html'
        }
      }
  });

  $stateProvider.state('modal.substate', { 
    url: '/substate',
    template: '<h3>I\'m a substate in a modal'
  });

(Credit to @christopherthielen for the example code.)

   <script type="text/ng-template" id="modal.html">
      <div class="modal-overlay fade">
        <div class="modal-content">
          <h2>Modal</h2>
          This modal has a substate.  <a ui-sref=".substate">Activate it</a>
          <div ui-view></div>
          <a ui-sref="app">Back to the app...</a>
        </div>
      </div>
    </script>

In my own troubleshooting, the problem with the 'injected-onEnter' pattern detailed in the ui-router FAQ --which your code follows-- is that the ui-views within the injected template seem to be no longer visible/available to ui-router. Alas! Good thing there's not much required to simply roll-your-own modal window.

Nested views inside angular ui bootstrap modal

1 Answers1