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

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.