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-asideattribute to any element to enable the plugin.

The module also exposes an $asideservice

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.tpl.demo.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 titleattribute isn't present
content string '' default content value if data-contentattribute 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 staticfor 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.
template path false

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 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.

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.