AngularStrap

AngularJS 1.2+ native directives for Bootstrap 3.

Looking for AngularStrap v1 docs? We've moved it to a new home while we push forward with AngularStrap 2.

About the project

AngularStrap is a set of native directives that enables seamless integration of Bootstrap 3.0+ into your AngularJS 1.2+ app.

With no external dependency except the Bootstrap CSS styles, AngularStrap is lighter and faster than ever as it does leverage the power of ngAnimate from AngularJS 1.2+!

The last stable release (v2.0) has landed in April 2014 after nearly 4 months of testing, during this beta, 365 commits landed from 17 contributors! Thanks to all the testers and contributors that made this release happen.

Quick Start

Install and manage AngularStrap with Bower. You can also use NuGet.

      
        $ bower install angular-strap#~2.0.0 --save
      
    

Load the required javascript libraries (Bootstrap scripts files are not needed).

      
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> <script src="bower_components/angular-strap/dist/angular-strap.min.js"></script> <script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
      
    

Inject the mgcrea.ngStrapmodule into your application.

      
        angular.module('myApp', ['mgcrea.ngStrap']);
      
    

Custom builds

AngularStrap provides independently built modules that can be loaded separately

        
          angular.module('myApp', [ 'mgcrea.ngStrap.modal', 'mgcrea.ngStrap.aside', 'mgcrea.ngStrap.tooltip' ]);
        
      

Contribute

Build and work on AngularStrap with Gulp.

      
        // Serve and watch docs, ideal to hack!
        $ gulp serve
        // Continuous integration
        $ gulp karma:server
        // Build AngularStrap
        $ gulp build
      
    

Animations

AngularStrap leverages AngularJS ngAnimatemodule to provide animations to the directives. Therefore, it requires to load custom CSS code as ngAnimatecomes with a very specific markup.

AngularMotion

Theses docs rely on the angular-motion.cssstylesheet from the AngularMotion project.

        
          $ bower install angular-motion --save
        
      

Examples

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Live demo clog.info

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

Backdrop animation

Backdrop animation being powered by ngAnimate, it requires custom CSS.

      
        .modal-backdrop.am-fade {
          opacity: .5;
          transition: opacity .15s linear;
          &.ng-enter {
            opacity: 0;
            &.ng-enter-active {
              opacity: .5;
            }
          }
          &.ng-leave {
            opacity: .5;
            &.ng-leave-active {
              opacity: 0;
            }
          }
        }
      
    

Usage

Append a bs-modalattribute to any element to activate the directive.

The module also exposes a $modalservice

Available for programmatic use (inside a directive/controller).

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

            // Pre-fetch an external template populated with a custom scope
            var myOtherModal = $modal({scope: $scope, template: 'modal/docs/modal.tpl.demo.html', show: false});
            // Show when some event occurs (use $promise property to ensure the template has been loaded)
            $scope.showModal = function() {
              myOtherModal.$promise.then(myOtherModal.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-modal attribute

Name type default description
animation string am-fade apply a CSS animation powered by ngAnimate
backdropAnimation string am-fade apply a CSS animation to backdrop 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.modal 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.

prefixEvent string 'modal'

If provided, prefixes the events '.hide' '.hide.after' '.show' and '.show.after' with the passed in value. With the default value these events are 'modal.hide' 'modal.hide.after' 'modal.show' and 'modal.show.after'

Default options

You can override global defaults for the plugin with $modalProvider.defaults

        
          angular.module('myApp')
          .config(function($modalProvider) {
            angular.extend($modalProvider.defaults, {
              animation: 'am-flip-x'
            });
          })
        
      

Scope methods

Methods available inside the directive scope to toggle visibility.

$show()

Reveals the modal.

$hide()

Hides the modal.

$toggle()

Toggles the modal.

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.

Examples

Alerts are styled tiny dialogs that inherit the behavior of modals.

Plugin dependency

Alerts require the modal plugin to be included.

Live demo clog.info

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

Usage

Append a bs-alertattribute to any element to enable the plugin.

The module also exposes an $alertservice

Available for programmatic use (inside a controller/directive).

        
          angular.module('myApp')
          .controller('DemoCtrl', function($scope, $alert) {
            var myAlert = $alert({title: 'Holy guacamole!', content: 'Best check yo self, you\'re not looking too good.', placement: 'top', type: 'info', show: true});
          })
        
      

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 apply a CSS animation powered by ngAnimate
placement string '' how to position the alert - top | top-left | top-right (requires custom CSS).
title string '' default title value if titleattribute isn't present
content string '' default content value if data-contentattribute isn't present
type string 'info' default content value if data-typeattribute isn't present
keyboard boolean true Closes the alert when escape key is pressed
show boolean true Shows the alert when initialized.
container string | false false

Appends the alert to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the alert in the flow of the document near the triggering element - which will prevent the alert 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.

duration number | false false

If provided, the number of seconds the alert should be displayed for before it is automatically closed. Default keeps alert open until explicity closed.

dissmissable boolean true

Make the alert dissmissable by adding a close button (×).

Default options

You can override global defaults for the plugin with $alertProvider.defaults

        
          angular.module('myApp')
          .config(function($alertProvider) {
            angular.extend($alertProvider.defaults, {
              animation: 'am-fade-and-slide-top',
              placement: 'top'
            });
          })
        
      

Scope methods

Methods available inside the directive scope to toggle visibility.

$show()

Reveals the alert.

$hide()

Hides the alert.

$toggle()

Toggles the alert.

Examples

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

This modules exposes two directives: bs-checkbox and bs-radio that can be used as attributes to trigger toggle, checkbox or radio behavior.

Group directives are also available as shortcuts

Use bs-checkbox-group and bs-radio-group to easily setup the proper markup at compile time.

Live demo clog.info

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


Type support

Theses directives can handle both strings, numbers and booleans values.

Examples

Add quick, dynamic select functionality with any form text input.

Plugin dependency

Selects require the tooltip module and parseOptions helper module to be loaded.

Live demo

$scope.selectedIcon = "{{selectedIcon}}";
$scope.selectedIcons = "{{selectedIcons}}";
$scope.icons = "{{icons}}";

Usage

Append a bs-selectattribute to any element to enable the directive.

The module exposes a $selectservice

Available for programmatic use (mainly in directives as it requires a DOM element).

        
          var mySelect = $select(element, controller);
        
      

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

This module supports exotic placement options!

You can position your select in corners (such as bottom-left) or any other combination two.

Exotic placement options 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.

Name type default description
animation string am-fade apply a CSS animation powered by ngAnimate
placement string 'bottom-left' how to position the typeahead - top | bottom | left | right, or any combination like bottom-left.
trigger string 'focus' how typeahead is triggered - click | hover | focus | manual
html boolean false replace ng-bind with ng-bind-html, requires ngSanitize to be loaded
delay number | object 0

delay showing and hiding the typeahead (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false

Appends the typeahead to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the typeahead in the flow of the document near the triggering element - which will prevent the typeahead from floating away from the triggering element during a window resize.

template path | id '$typeahead'

If provided, overrides the default template, can be either a remote URL or a cached template id.

multiple boolean false

Whether multiple selections should be allowed.

all-none-buttons boolean false

Show the buttons to select and deselect all items at once.

max-length number 3

Maximum number of selected values that can be displayed inline.

max-length-html string 'selected'

Placeholder to append to an overflowed multiple selection.

sort boolean true

Sort the order of the displayed labels.

placeholder string 'Choose among the following...'

Placeholder text when no value is selected.

iconCheckmark string 'glyphicon glyphicon-ok'

CSS class for 'checkmark' icon.

Default options

You can override global defaults for the plugin with $selectProvider.defaults

        
          angular.module('myApp')
          .config(function($selectProvider) {
            angular.extend($selectProvider.defaults, {
              animation: 'am-flip-x',
              sort: false
            });
          })
        
      

Examples

Add datepicker functionality with any form text input.

Plugin dependency

Datepickers require the tooltip module and dateParser helper module to be loaded.

Theses docs currently use bootstrap-additions for styling purposes.

Support for locales

This module leverages the $locale service. You just have to load the proper i18n file to seamlessly translate your datepickers.

Live demo

$scope.selectedDate = {{selectedDate}}; // <- {{ getType('selectedDate') }}
$scope.selectedDateAsNumber = {{selectedDateAsNumber}}; // <- {{ getType('selectedDateAsNumber') }}
$scope.fromDate = {{fromDate}}; // <- {{ getType('fromDate') }}
$scope.untilDate = {{untilDate}}; // <- {{ getType('untilDate') }}


Usage

Append a bs-datepickerattribute to any element to enable the directive.

The module exposes a $datepickerservice

Available for programmatic use (mainly in directives as it requires a DOM element).

        
          var myDatepicker = $datepicker(element, ngModelController);
        
      

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

This module supports exotic placement options!

You can position your select in corners (such as bottom-left) or any other combination two.

Exotic placement options 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.

Name type default description
animation string am-fade apply a CSS animation powered by ngAnimate
placement string 'bottom-left' how to position the typeahead - top | bottom | left | right, or any combination like bottom-left.
trigger string 'focus' how typeahead is triggered - click | hover | focus | manual
html boolean false replace ng-bind with ng-bind-html, requires ngSanitize to be loaded
delay number | object 0

delay showing and hiding the typeahead (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false

Appends the typeahead to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the typeahead in the flow of the document near the triggering element - which will prevent the typeahead from floating away from the triggering element during a window resize.

template path | id '$typeahead'

If provided, overrides the default template, can be either a remote URL or a cached template id.

dateFormat string 'shortDate'

Rendering format of your date, leverages ng.filter:date.

dateType string 'date'

Expected model type of your date - date | number | iso | string

autoclose boolean false

Whether the picker should close itself upon select.

useNative boolean false

Whether to use a native component if available (iOS/Android).

minDate date* -Infinity

Minimum allowed date for selection (* fed into the Date constructor). You can use the string "today" that will resolve the current date.

maxDate date* +Infinity

Maximum allowed date for selection (* fed into the Date constructor). You can use the string "today" that will resolve the current date.

startView number 0

View that sould be opened by default - 0 | 1 | 2.

minView number 0

Minimum allowed view - 0 | 1 | 2. 1 will only allow month selection.

startWeek number 1

First day of the week.

startDate date* today

Date that sould be opened by default.

iconLeft string 'glyphicon glyphicon-chevron-left'

CSS class for 'left' icon.

iconRight string 'glyphicon glyphicon-chevron-right'

CSS class for 'right' icon.

daysOfWeekDisabled string ''

List of decimal days of the week values that are disabled and hence cannot be selected. For example, '06' disables Sunday and Saturday, '12345' disables Monday to Friday.

Default options

You can override global defaults for the plugin with $datepickerProvider.defaults

        
          angular.module('myApp')
          .config(function($datepickerProvider) {
            angular.extend($datepickerProvider.defaults, {
              dateFormat: 'dd/MM/yyyy',
              startWeek: 1
            });
          })
        
      

Examples

Add quick, dynamic timepicker functionality with any form text input.

Plugin dependency

Timepickers require the tooltip module and dateParser helper module to be loaded.

Theses docs currently use bootstrap-additions for styling purposes.

Support for locales

This module leverages the $locale service. You just have to load the proper i18n file to seamlessly translate your timepickers.

Live demo

$scope.time = {{time}}; // (formatted: {{time | date:'shortTime'}})
$scope.selectedTimeAsNumber = {{selectedTimeAsNumber}}; // (formatted: {{selectedTimeAsNumber | date:'shortTime'}})
$scope.sharedDate = {{sharedDate}}; // (formatted: {{sharedDate | date:'short'}})
  


Usage

Append a bs-timepickerattribute to any element to enable the directive.

The module exposes a $timepickerservice

Available for programmatic use (mainly in directives as it requires a DOM element).

        
          var myTimepicker = $timepicker(element, ngModelController);
        
      

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

This module supports exotic placement options!

You can position your select in corners (such as bottom-left) or any other combination two.

Exotic placement options 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.

Name type default description
animation string am-fade apply a CSS animation powered by ngAnimate
placement string 'bottom-left' how to position the typeahead - top | bottom | left | right, or any combination like bottom-left.
trigger string 'focus' how typeahead is triggered - click | hover | focus | manual
html boolean false replace ng-bind with ng-bind-html, requires ngSanitize to be loaded
delay number | object 0

delay showing and hiding the typeahead (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false

Appends the typeahead to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the typeahead in the flow of the document near the triggering element - which will prevent the typeahead from floating away from the triggering element during a window resize.

template path | id '$typeahead'

If provided, overrides the default template, can be either a remote URL or a cached template id.

timeFormat string 'shortTime'

Rendering format of your time, leverages ng.filter:date.

timeType string 'date'

Expected model type of your time - date | number | iso | string

autoclose boolean false

Whether the picker should close itself upon select.

useNative boolean true

Whether to use a native component if available (iOS/Android).

minTime date* -Infinity

Minimum allowed time for selection (parsed against current format). You can use the string "now" that will resolve the current time.

maxTime date* +Infinity

Maximum allowed time for selection (parsed against current format). You can use the string "now" that will resolve the current time.

length number 5

Length of the timepicker (should be an odd number).

hourStep number 1

Default step for hours.

minuteStep number 5

Default step for minutes.

iconUp string 'glyphicon glyphicon-chevron-up'

CSS class for 'up' icon.

iconDown string 'glyphicon glyphicon-chevron-down'

CSS class for 'down' icon.

Default options

You can override global defaults for the plugin with $timepickerProvider.defaults

        
          angular.module('myApp')
          .config(function($timepickerProvider) {
            angular.extend($timepickerProvider.defaults, {
              timeFormat: 'HH:mm',
              length: 7
            });
          })
        
      

Add quick, dynamic navbar functionality to transition through active/inactive states.

Live demo

$location.path() = "{{$location.path()}}";

Append a bs-navbarattribute to any element to activate the directive.

Use data-match-route attributes to any children navigation item that should be toggled active.

Heads up!

The directives also supports HTML5 mode, you just have to drop the href dashes.

Options

Options can be passed via data attributes, append the option name to data-, as in data-route-attr="".

Name type default description
activeClass string active Class to apply when the navigation item is active
routeAttr string data-match-route Attribute to test against $location.path()

Default options

You can override global defaults for the plugin with $navbarProvider.defaults

        
          angular.module('myApp')
          .config(function($navbarProvider) {
            angular.extend($navbarProvider.defaults, {
              activeClass: 'in'
            });
          })
        
      

Examples

Add small overlays of content on hover, to any element for housing secondary information.

Plugin dependency

Tooltip require the helpers.dimensions module to be loaded.

Live demo clog.info

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

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

Usage

Append a bs-tooltip attribute to any element to enable the directive.

The module exposes a $tooltipservice

Available for programmatic use (mainly in directives as it requires a DOM element).

        
          var myTooltip = $tooltip(element, {title: 'My Title'});
        
      

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-tooltip attribute

This module supports exotic placement options!

You can position your popover in corners (such as bottom-left) or any other combination two.

Exotic placement options 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.

Name type default description
animation string am-fade apply a CSS animation powered by ngAnimate
placement string 'top' how to position the tooltip - top | bottom | left | right, or any combination like bottom-left.
trigger string 'hover focus' how tooltip is triggered - click | hover | focus | manual
title string '' default title value if titleattribute isn't present
html boolean false replace ng-bind with ng-bind-html, requires ngSanitize to be loaded
delay number | object 0

delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false

Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.

target string | DOMElement | false false

Position the tooltip relative to a specific target element.

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

prefixEvent string 'tooltip'

If provided, prefixes the events '.hide' '.hide.after' '.show' and '.show.after' with the passed in value. With the default value these events are 'tooltip.hide' 'tooltip.hide.after' 'tooltip.show' and 'tooltip.show.after'

Default options

You can override global defaults for the plugin with $tooltipProvider.defaults

        
          angular.module('myApp')
          .config(function($tooltipProvider) {
            angular.extend($tooltipProvider.defaults, {
              animation: 'am-flip-x',
              trigger: 'hover'
            });
          })
        
      

Scope methods

Methods available inside the directive scope to toggle visibility.

$show()

Reveals the tooltip.

$hide()

Hides the tooltip.

$toggle()

Toggles the tooltip.

Examples

Add small overlays of content on tap, like those on the iPad, to any element for housing secondary information.

Plugin dependency

Popovers require the tooltip module to be loaded.

Live demo clog.info

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

Usage

Append a bs-popoverattribute to any element to enable the directive.

The module exposes a $popoverservice

Available for programmatic use (mainly in directives as it requires a DOM element).

        
          var myPopover = $popover(element, {title: 'My Title', content: 'My Content'});
        
      

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-popover attribute

This module supports exotic placement options!

You can position your popover in corners (such as bottom-left) or any other combination two.

Exotic placement options 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.

Name type default description
animation string am-fade apply a CSS animation powered by ngAnimate
placement string 'right' how to position the popover - top | bottom | left | right, or any combination like bottom-left.
trigger string 'click' how popover is triggered - click | hover | focus | manual
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
delay number | object 0

delay showing and hiding the popover (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

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.

target string | DOMElement | false false

Position the tooltip relative to a specific target element.

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.popover 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 $popoverProvider.defaults

        
          angular.module('myApp')
          .config(function($popoverProvider) {
            angular.extend($popoverProvider.defaults, {
              animation: 'am-flip-x',
              trigger: 'hover'
            });
          })
        
      

Scope methods

Methods available inside the directive scope to toggle visibility.

$show()

Reveals the popover.

$hide()

Hides the popover.

$toggle()

Toggles the popover.

Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.

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

Plugin dependency

Dropdowns require the tooltip plugin to be included.

Live demo clog.info

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

Append a bs-dropdownattribute to any element to enable the directive.

The module exposes a $dropdownservice

Available for programmatic use (mainly in directives as it requires a DOM element).

        
          var myDropdown = $dropdown(element, {title: 'My Title', content: 'My Content'});
        
      

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-dropdown attribute

This module supports exotic placement options!

You can position your dropdown in corners (such as bottom-left) or any other combination two.

Exotic placement options 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.

Name type default description
animation string am-fade apply a CSS animation powered by ngAnimate
placement string 'bottom-left' how to position the dropdown - top | bottom | left | right, or any combination like bottom-left.
trigger string 'click' how dropdown is triggered - click | hover | focus | manual
html boolean false replace ng-bind with ng-bind-html, requires ngSanitize to be loaded
delay number | object 0

delay showing and hiding the dropdown (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false

Appends the dropdown to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the dropdown in the flow of the document near the triggering element - which will prevent the dropdown 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.

Default options

You can override global defaults for the plugin with $dropdownProvider.defaults

        
          angular.module('myApp')
          .config(function($dropdownProvider) {
            angular.extend($dropdownProvider.defaults, {
              animation: 'am-flip-x',
              trigger: 'hover'
            });
          })
        
      

Examples

Add quick, dynamic typeahead functionality with any form text input.

Plugin dependency

Selects require the tooltip module and parseOptions helper module to be loaded.

Live demo

$scope.selectedState = "{{selectedState}}";
$scope.states = {{states}};

$scope.selectedIcon = "{{selectedIcon}}";
$scope.icons = "{{icons}}";

$scope.selectedAddress = "{{selectedAddress}}";

Usage

Append a bs-typeaheadattribute to any element to enable the directive.

The module exposes a $typeaheadservice

Available for programmatic use (mainly in directives as it requires a DOM element).

        
          var myTypeahead = $typeahead(element, {controller: someModelController});
        
      

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

This module supports exotic placement options!

You can position your typeahead in corners (such as bottom-left) or any other combination two.

Exotic placement options 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.

Name type default description
animation string am-fade apply a CSS animation powered by ngAnimate
placement string 'bottom-left' how to position the typeahead - top | bottom | left | right, or any combination like bottom-left.
trigger string 'focus' how typeahead is triggered - click | hover | focus | manual
html boolean false replace ng-bind with ng-bind-html, requires ngSanitize to be loaded
delay number | object 0

delay showing and hiding the typeahead (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false

Appends the typeahead to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the typeahead in the flow of the document near the triggering element - which will prevent the typeahead from floating away from the triggering element during a window resize.

template path | id '$typeahead'

If provided, overrides the default template, can be either a remote URL or a cached template id.

limit number 6

The max number of items to display in the dropdown.

minLength number 1

The minimum character length needed before triggering autocomplete suggestions.

Default options

You can override global defaults for the plugin with $typeaheadProvider.defaults

        
          angular.module('myApp')
          .config(function($typeaheadProvider) {
            angular.extend($typeaheadProvider.defaults, {
              animation: 'am-flip-x',
              minLength: 2,
              limit: 8
            });
          })
        
      

Examples

The subnavigation on the left is a live demo of the scrollspy plugin.

Plugin dependency

Scrollspy require the helpers.dimensions module to be loaded.

      
        <ul class="nav bs-sidenav">
          <li data-target="#modals" bs-scrollspy>
            <a href="#modals">Modal</a>
            <ul class="nav">
              <li data-target="#modals-examples" bs-scrollspy><a href="#modals-examples">Examples</a></li>
              <li data-target="#modals-usage" bs-scrollspy><a href="#modals-usage">Usage</a></li>
            </ul>
          </li>
        </ul>

        
        <ul class="nav bs-sidenav" bs-scrollspy-list>
          <li>
            <a href="#modals">Modal</a>
            <ul class="nav">
              <li><a href="#modals-examples">Examples</a></li>
              <li><a href="#modals-usage">Usage</a></li>
            </ul>
          </li>
        </ul>
      
    

Usage

Append a bs-scrollspyattribute to any element to enable the plugin.

The module also exposes an $scrollspyservice

Available for programmatic use (mainly inside a directive as it requires an element).

        
          var scrollspy = $scrollspy(element, options);
        
      

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

Name type default description
target string '' Required target selector.
offset number 0 Pixels to offset from top of screen when calculating position of scroll.

Default options

You can override global defaults for the plugin with $scrollspyProvider.defaults

        
          angular.module('myApp')
          .config(function($scrollspyProvider) {
            angular.extend($scrollspyProvider.defaults, {
              animation: 'am-fade-and-slide-top',
              placement: 'top'
            });
          })
        
      

Examples

The subnavigation on the left is a live demo of the affix plugin.

Plugin dependency

Affix require the helpers.dimensions module to be loaded.

      
        <div class="bs-sidebar hidden-print" role="complementary" data-offset-top="-80" bs-affix></div>
      
    

Usage

Append a bs-affixattribute to any element to enable the plugin.

You can affix inside a custom container with the bs-affix-target attribute added to any parent element.

The module also exposes an $affixservice

Available for programmatic use (mainly inside a directive as it requires an element).

        
          var affix = $affix(element, options);
        
      

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

Name type default description
offsetTop number 0 Pixels to offset from top of screen when calculating position of scroll.
offsetBottom number 0 Pixels to offset from bottom of screen when calculating position of scroll.
offsetParent number 0 Pixels to offset from parent when calculating position of scroll.
offsetUnpin number 0 Pixels to offset from unpin position when calculating position of scroll.

Default options

You can override global defaults for the plugin with $affixProvider.defaults

        
          angular.module('myApp')
          .config(function($affixProvider) {
            angular.extend($affixProvider.defaults, {
              animation: 'am-fade-and-slide-top',
              placement: 'top'
            });
          })
        
      

Examples

Add quick, dynamic tab functionality to transition through panes of local content.

Live demo clog.info

$scope.tabs = {{tabs | json}};
{{tabs.activeTab}} 

Usage

Append a bs-tabsattribute to any element to enable the directive.

Custom animations

Pane animation is done with ngClass('active') callbacks and require custom CSS.

      
        .tabs.am-fade .tab-pane {
          opacity: 1;
          transition: opacity .3s ease;
          min-height:60px;
          &.active-add {
            display: block;
            opacity: 0;
            &.active-add-active {
              opacity: 1;
            }
          }
          &.active-remove {
            display: none;
          }
        }
      
    

Options

Options can be passed via data attributes or as an AngularJS expression to evaluate as an object on bs-tabs. For data attributes, append the option name to data-, as in data-animation="".

Name type default description
animation string am-fade apply a CSS animation to the popover with ngAnimate
template path false

If a remote URL is provided, overrides the default template

Default options

You can override global defaults for the plugin with $tabProvider.defaults

        
          angular.module('myApp')
          .config(function($tabProvider) {
            angular.extend($tabProvider.defaults, {
              animation: 'am-flip-x'
            });
          })