angular-ui-router-uib-modal

angular-ui-router-uib-modal
===========================

![Build Status](https://travis-ci.org/nonplus/angular-ui-router-uib-modal)

AngularJS module that adds support for ui-bootstrap modal states when using ui-router.

Motivation
----------

Some RIAs using UI-Router use modal dialogs for certain application states.
The UI-Router's FAQ,
shows how to implement modal dialogs using ui.bootstrap.modal service.
While it works well, it requires a lot of boiler-plate code, complicates the state definition, and requires the state
controller to be aware that its inside a $uibModalInstance to automatically close the dialog on a state change.

This module gets rid of the boilerplate by adding support for a modal: true option in state definitions.
This causes the state to be displayed via $uibModal.open(...) instead of within a .

Installing the Module
---------------------
Installation can be done through bower or npm:
``shell bower install angular-ui-router-uib-modal`

In your page add:`html`

Loading the Module ------------------

This module declares itself as ui.router.modal, so it can be declared as a dependency of your application as normal:

`javascript var app = angular.module('myApp', ['ng', 'ui.router', 'ui.bootstrap', 'ui.router.modal']);`

Specifying modal states -----------------------

Adding a modal: trueto a state definition causes its template to be opened through a call to$uibModal.open(stateDefinition) rather than embedding it inside of a . To specify which resolved state values are available to the modal controller, use an array instead oftrue, e.g.modal: ['value1', 'value2'].

Inside the modal state controller, the modal via can be closed via $uibModalInstance.close/dismiss()or by transitioning to the parent state via$state.go('^').

`javascript $stateProvider .state('contacts', { url: '/contacts', // ... }) .state('contacts.contact', { url: '/:contactId', modal: true, template: '

...',
    controller: function($scope, $state, contact) {
		$scope.close = function() {
			$state.go('^');
		}
    },
    resolve: {
      // Single contact
      contact: ['Contacts', '$stateParams', function(Contacts, $stateParams) {
        // Use Contacts service to retrieve a contact
        return Contacts.get({ id: $stateParams.contactId });
      }]
    }
  })


Caveats
-------

Modal does not have access to parent state's $scope values

The modal's $scopedoesn't inherit anything from the parent state's scope. So any data that comes from the parent should be specified viaresolve settings.

You must specify resolved parent state values to provide to the modal controller

By default, $uibModal.open()is called with only the resolved values of the modal state. If you want to include values resolved in parent states, use an array instead oftrue for the modal setting.

In the following examples, $uibModal.open() for the parent.childstate will be called with resolved valuesa, b, x, y and z.

`$stateProvider .state('parent', { ... resolve: { a: ..., b: ..., c: ... } }) .state('parent.child', { ... modal: ['a', 'b'], resolve: { x: ..., y: ..., z: ... } })`Does not work with old versions of UI-Bootstrap

The module uses the current $uibModal service rather than the deprecated $modal.

Does not work with custom onEnter and onExit state configurationsThe module works by addingonEnter and onExit` state configurations to modal states.
If these are already defined in a modal state, an error is thrown.

This may be redistributed under the MIT licence. For the full license terms, see the LICENSE file which
should be alongside this readme.