# Asides aside.js

`mgcrea.ngStrap.aside`

## Examples

Asides are custom panels, drawers that inherit the behavior of modals.

#### Plugin dependency

Asides require the modal plugin to be included.

### Live demo

    $scope.aside = {{aside | json}};

#### Custom styles required

Asides are not part of the Bootstrap's core, to use them you must use `bootstrap-additions.css` from the BootstrapAdditions project. This project being not yet fully released, meanwhile, you can use the development snapshot compiled for theses docs.

## Usage

Append a `bs-aside`attribute to any element to enable the plugin.

#### The module also exposes an `$aside`service

Available for programmatic use.

              angular.module('myApp')
              .controller('DemoCtrl', function($scope, $aside) {
                // Show a basic aside from a controller
                var myAside = $aside({title: 'My Title', content: 'My Content', show: true});

                // Pre-fetch an external template populated with a custom scope
                var myOtherAside = $aside({scope: $scope, template: 'aside/docs/aside.demo.tpl.html'});
                // Show when some event occurs (use $promise property to ensure the template has been loaded)
                myOtherAside.$promise.then(function() {
                  myOtherAside.show();
                })
              })

### Options

Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to `data-`, as in `data-animation=""`.

For directives, you can naturally inherit the contextual `$scope` or leverage a custom one with an AngularJS expression to evaluate as an object directly on the `bs-aside` attribute

Name | type | default | description
--- | --- | --- | ---
animation | string | am-fade-and-slide-right | apply a CSS animation powered by ngAnimate
placement | string | 'top' | how to position the modal - top | bottom | center (requires custom CSS).
title | string | '' | default title value if `title`attribute isn't present
content | string | '' | default content value if `data-content`attribute isn't present
html | boolean | false | replace `ng-bind` with `ng-bind-html`, requires `ngSanitize` to be loaded
backdrop | boolean or the string `'static'` | true | Includes a modal-backdrop element. Alternatively, specify `static`for a backdrop which doesn't close the modal on click.
keyboard | boolean | true | Closes the modal when escape key is pressed
show | boolean | true | Shows the modal when initialized.
container | string | false | false | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.
controller | string|function | false | Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.
controllerAs | string | false | A controller alias name. If present the controller will be published to scope under the `controllerAs` name.
template | string | '' | Provide an html template as a string (when templateUrl is falsy).
templateUrl | path | 'aside/aside.tpl.html' | If provided, overrides the default template, can be either a remote URL or a cached template id. It should be a `div.aside` element following Bootstrap Additions styles conventions (like this).
contentTemplate | path | false | If provided, fetches the partial and includes it as the inner content, can be either a remote URL or a cached template id.
onShow | function |  | If provided, this function will be invoked after the aside is shown.
onBeforeShow | function |  | If provided, this function will be invoked before the aside is shown.
onHide | function |  | If provided, this function will be invoked after the aside is hidden.
onBeforeHide | function |  | If provided, this function will be invoked before the aside is hidden.

#### Default options

You can override global defaults for the plugin with `$asideProvider.defaults`

              angular.module('myApp')
              .config(function($asideProvider) {
                angular.extend($asideProvider.defaults, {
                  animation: 'am-fadeAndSlideLeft',
                  placement: 'left'
                });
              })

### Scope methods

Methods available inside the directive scope to toggle visibility.

#### $show()

Reveals the aside.

#### $hide()

Hides the aside.

#### $toggle()

Toggles the aside.