angular-ui / bootstrap

PLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!

Project Status (please read)

Due to Angular's continued adoption, our creation of the Angular version of this library, and the the project maintainers' moving on to other things, this project is considered feature-complete and is no longer being maintained.

We thank you for all your contributions over the years and hope you've enjoyed using this library as much as we've had developing and maintaining it. It would not have been successful without them.

---

UI Bootstrap - AngularJS directives specific to Bootstrap

Quick links

• Demo
• Angular 2
• Installation
  • NPM
  • Bower
  • NuGet
  • Custom
  • Manual
• Webpack / JSPM
• Support
  • FAQ
  • Code of Conduct
  • PREFIX MIGRATION GUIDE
  • Supported browsers
  • Need help?
  • Found a bug?
• Contributing to the project
• Development, meeting minutes, roadmap and more.

Demo

Do you want to see directives in action? Visit https://angular-ui.github.io/bootstrap/!

Angular 2

Are you interested in Angular 2? We are on our way! Check out ng-bootstrap.

Installation

Installation is easy as UI Bootstrap has minimal dependencies - only the AngularJS and Twitter Bootstrap's CSS are required. Notes:

• Since version 0.13.0, UI Bootstrap depends on ngAnimate for transitions and animations, such as the accordion, carousel, etc. Include ngAnimate in the module dependencies for your app in order to enable animation.
• UI Bootstrap depends on ngTouch for swipe actions. Include ngTouch in the module dependencies for your app in order to enable swiping.

Angular Requirements

• UI Bootstrap 1.0 and higher requires Angular 1.4.x or higher and it has been tested with Angular 1.4.8.
• UI Bootstrap 0.14.3 is the last version that supports Angular 1.3.x.
• UI Bootstrap 0.12.0 is the last version that supports Angular 1.2.x.

Bootstrap Requirements

• UI Bootstrap requires Bootstrap CSS version 3.x or higher and it has been tested with Bootstrap CSS 3.3.6.
• UI Bootstrap 0.8 is the last version that supports Bootstrap CSS 2.3.x.

Install with NPM

$ npm install angular-ui-bootstrap

This will install AngularJS and Bootstrap NPM packages.

Install with Bower

$ bower install angular-bootstrap

Note: do not install 'angular-ui-bootstrap'. A separate repository - bootstrap-bower - hosts the compiled javascript file and bower.json.

Install with NuGet

To install AngularJS UI Bootstrap, run the following command in the Package Manager Console

PM> Install-Package Angular.UI.Bootstrap

Custom build

Head over to https://angular-ui.github.io/bootstrap/ and hit the Custom build button to create your own custom UI Bootstrap build, just the way you like it.

Manual download

After downloading dependencies (or better yet, referencing them from your favorite CDN) you need to download build version of this project. All the files and their purposes are described here: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files Don't worry, if you are not sure which file to take, opt for ui-bootstrap-tpls-[version].min.js.

Adding dependency to your project

When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the ui.bootstrap AngularJS module:

angular.module('myModule', ['ui.bootstrap']);

Webpack / JSPM

To use this project with webpack, follow the NPM instructions. Now, if you want to use only the accordion, you can do:

import accordion from 'angular-ui-bootstrap/src/accordion';

angular.module('myModule', [accordion]);

You can import all the pieces you need in the same way:

import accordion from 'angular-ui-bootstrap/src/accordion';
import datepicker from 'angular-ui-bootstrap/src/datepicker';

angular.module('myModule', [accordion, datepicker]);

This will load all the dependencies (if any) and also the templates (if any).

Be sure to have a loader able to process css files like css-loader.

If you would prefer not to load your css through your JavaScript file loader/bundler, you can choose to import the index-nocss.js file instead, which is available for the modules:

• carousel
• datepicker
• datepickerPopup
• dropdown
• modal
• popover
• position
• timepicker
• tooltip
• typeahead

The other modules, such as accordion in the example below, do not have CSS resources to load, so you should continue to import them as normal:

import accordion from 'angular-ui-bootstrap/src/accordion';
import typeahead from 'angular-ui-bootstrap/src/typeahead/index-nocss.js';

angular.module('myModule', [accordion, typeahead]);

Versioning

Pre-2.0.0 does not follow a particular versioning system. 2.0.0 and onwards follows semantic versioning. All release changes can be viewed on our changelog.

Support

FAQ

https://github.com/angular-ui/bootstrap/wiki/FAQ

Code of Conduct

Take a moment to read our Code of Conduct

PREFIX MIGRATION GUIDE

If you're updating your application to use prefixes, please check the migration guide.

Supported browsers

Directives from this repository are automatically tested with the following browsers:

• Chrome (stable and canary channel)
• Firefox
• IE 9 and 10
• Opera
• Safari

Modern mobile browsers should work without problems.

Need help?

Need help using UI Bootstrap?

• Live help in the IRC (#angularjs channel at the freenode network). Use this webchat or your own IRC client.
• Ask a question in StackOverflow under the angular-ui-bootstrap tag.

Please do not create new issues in this repository to ask questions about using UI Bootstrap

Found a bug?

Please take a look at CONTRIBUTING.md and submit your issue here.

---

Contributing to the project

We are always looking for the quality contributions! Please check the CONTRIBUTING.md for the contribution guidelines.

Development, meeting minutes, roadmap and more.

Head over to the Wiki for notes on development for UI Bootstrap, meeting minutes from the UI Bootstrap team, roadmap plans, project philosophy and more.

bootstrap's Issues

Accordian: isOpen fails to work with ngRepeat

By default I want the first accordian-group to be open when loaded initially. So for that I have set isOpen to true in first accordian like

<accordion-group heading="First Header" is-open="true">

Although this works fine for static content, but when I start adding dynamic content using ngRepeat, it fails.

  <accordion>
    <accordion-group heading="First Header" is-open="true">
      <div ng-repeat="item in items">{{item}}</div>
    </accordion-group>
    <accordion-group heading="Second Header">
      You can toggle to second group ofcourse..
    </accordion-group>
  </accordion>

Here's the plunker http://plnkr.co/edit/YcDRVJ?p=preview

should be able to toggle each accordion group.

The accordion widget currently does not support toggle. Clicking on an opened accordion group will not close it. I will expect it to behave the same way twitter bootstrap does.

see jsfiddle

http://jsfiddle.net/eze123/Uf4yW/4/

Accordion: "static groups" tests fail

While working on the tooltip, the following accordion tests failed. This is on the master branch as of f8cdd4a. They fail consistently and are the only tests to fail. I'm on Arch Linux running Chromium Version 23.0.1271.95 (169798).

Chrome 23.0 accordion accordion-group with static groups should change selected element on click FAILED
    Expected false to be true.
    Error: Expected false to be true.
        at null.<anonymous> (/store/dev/repos/angular-ui-boostrap/src/accordion/test/accordionSpec.js:129:49)
    Expected false to be true.
    Error: Expected false to be true.
        at null.<anonymous> (/store/dev/repos/angular-ui-boostrap/src/accordion/test/accordionSpec.js:134:49)
Chrome 23.0 accordion accordion-group with static groups should toggle element on click FAILED
    Expected false to be true.
    Error: Expected false to be true.
        at null.<anonymous> (/store/dev/repos/angular-ui-boostrap/src/accordion/test/accordionSpec.js:140:49)

tooltip breaks bindings

Please see http://plnkr.co/1GiwHv

Tests failing on IE 8

Now that we've got tests running on the google's CI server (http://ci.angularjs.org/job/angularui-bootstrap/) we really need to get more serious about testing! For now our tests are passing on all browsers but IE8 so we need to fix this (if we decide to support IE8).

For now IE8 is excluded from a set of browsers running tests so we need to either fix our tests or decide that we don't want to support IE8.

CI build fails

The CI build we've got at Google fails now due to a missing npm module:

Loading "grunt.js" tasks and helpers...ERROR
>> Error: Cannot find module 'node-markdown'

We should either modify the build or change the module used.

Fix and harmonize title display in the tabs and accordion

As of today tabs and accordion got the same title attribute but those attributes are interpreted differently:

• in tabs: scope: { title: '@' }
• in accordion: scope:{ title:'=' }

I believe that both directives should use the same syntax and I would vote for @. The problem is that it doesn't work in 1.0.2, we should migrate to 1.0.3 but 1.0.3 might have another regression...

In any case the tabs are broken in 1.0.2 at the moment.

Also, we should consider renaming the title attribute due to: #24

Thoughts?

Add documentation for bootstrap tabs

I can't find documentation for twitter bootstrap tabs

Add a directive for the button toggle

Something to ease working with:

http://twitter.github.com/bootstrap/javascript.html#buttons

The proposal for the markup:

<button button-toggle="assignableModelExpression">My button</button>

to mimic the existing dropdownToggle.

The directive should be extremely simple and should:

• add / remove the active class to the button based on model changes
• update model based on the click

WDYT?

Create Demo page

It would be nice if you would create a demo page (similar to http://angular-ui.github.com/) with explanation of how to use different directives.

I know writing docs and creating demos isn't the most exciting part of development, but without them we can't use the project (I really don't have the time to dig in and try to figure out things on my own without some starting point).

Thank you!

remove class support for modal directive

With the directive being named modal and allowing class declaration style it prevents the use case where you want class="modal" to only be used a style without the directive.

Publish release

It's great that you guys have build script, but could you also commit release, similar to how it's done in AngularJS UI? This way we have the latest stable version we can use in production products.

Thanks!

Hide modal on $scope $destroy

So, lets say your modal is in a view or some other scenario where the scope can get destroyed. Lets say it was open, and one of the interactions with the modal causes the view to change.

What happens is that although the modal is gone, the overlay is still open, and since the modal DOM no longer exists on the page, you can't remove it.

I was trying to do something like this to repair this but was not working:

scope.$on('$destroy', function(){
  elm.modal('hide');
  model.$setViewValue(false);
});

http://plnkr.co/edit/MWEsWlJeeQJGJw0REnOD?p=preview

add fade-in and fade-out support for modal

With raw bootstrap, you can control how the modal dialog appears, For example:

class="modal hide fade"

gives a pleasant fade-in/out to the dialog. Is there a plan to support that kind of behaviour?

IE Shiv Support?

Maybe just a preset array or a generated array of tags to be used with UI's shiv?

Switch to AngularJS 1.0.4

Now that 1.0.4 was released (http://blog.angularjs.org/2013/01/angularjs-104-bewildering-hair-and-112.html) we should switch to it since it fixes a couple of bugs that were plaguing the project :-)

Transitions don't work in IE9

Just open the http://angular-ui.github.com/bootstrap/ and see that both carousel and accordion transitions won't work.

Tooltip does not work inside repeat with dynamic value

Hello...

When I try the following, the column value (user.firstName) never displays. When I remove the tooltip directive, it reappears. I also tried displaying a hard coded value and the tooltip reappears although it was not displayed in the correct location. (This may be due to the fact, that I am rendering a template).

<tr ng-repeat="user in users | filter:myFilter | orderBy:predicate:reverse">
    <td>....</td>
    <td><a><span tooltip-placement="right" tooltip="Some Text">{{user.firstName}}</span></a></td>
</tr>

Please let me know if made a mistake.
Thanks!

Chris

Any plan to merge tabs.js with angular-bootstrap tabbalbe and tabPane ?

Hi,

Are the angular-bootstrap.js in the main angularjs project and tabs.js in angular-ui bootstrap project trying to achieve the same goal ?
It is not very clear for me if those bootsrap tabs related code should be merged in a single place.

Allow directives as attributes (restrict: 'EA')

ui-bootstrap directives such as accordion, alert, are currently restrict: 'E'.

Some people prefer to use directives as attributes (avoiding IE Shiv), and there should be no harm in allowing them to do that by relaxing the restriction to 'EA'.

fix(tooltip): update placement on content change

Right now, the tooltip attribute is observed and so is properly bound. But the position of the tooltip is not updated when the attribute changes, and so then appears off-center.

If you go to the demo page, click in the "Dynamic Tooltip Popup" input, hover over the "dynamic" tooltip, and then proceed to change the value, you can see the issue.

This is very minor right now, but one of the features to still be ported from Twitter's jQuery version will keep the tooltip open, and thus the artifact would be visible.

Tooltip issues

Based on discussion in #72 looks like there are still issues with the tooltip:

Oops, sorry for sending you a bad version! Here's the version I meant to send:
http://plnkr.co/edit/1GiwHv
That version demonstrates there's still a problem when you give a tooltip to a link whose href is bound to a value that is initially falsey: even after the value changes to something truthy, the href attribute stays set to nothing.

undesired tooltips in tab panes

The title= sticks around the dom on the div surrounding each tab pane. This causes the whole pane to always have a title= tooltip.

Should title just renamed or maybe have a prefix?

Documentation proposal - all directives in README

Would you guys accept a pull request where I move documentation/examples for each directive into the README?

fade transition directive

I threw together a fade directive that is based off of the collapse directive @petebacondarwin wrote.
Seems to work pretty nicely. What do you guys think?
http://plnkr.co/edit/VHLhJ6?p=preview

bsTabs

Picking up from angular-ui/angular-ui-OLDREPO#237

I have a recommendation, what if you do something like <tabs ng-model="someVar"> (optionally)

This way if you WANT to control tabs programmatically you can simply do someVar = 'whatever' or something similar.

Demo pages improvements

So, the current version of pages is available here: http://angular-ui.github.com/bootstrap/

There are some things I would like to improve before cutting the 0.1.0 release:

1. Improve directive titles (today those are just folder names) - done in 69f4c59
2. Display a name of a module in which a directive resides (plus a link to the GH folder?)
3. Add installation instruction (both to the readme and pages), explain that one can either add chosen modules only or everything
4. Ideally: a link to open a directive in plunker - done in 29197d9
5. Switch top navigation to have a dropdown menu (when browser gets thin, this big menu layout doesn't work).

Any other ideas?

Demo pages on Github?

So I just today discovered that you guys have http://ci.angularjs.org/job/angularui-bootstrap/ws/dist/index.html. Nice of you NOT to put it in the project URL lol.

We need to add cross-linking, but I want to ask, is this the official location of the demo pages?

Are you guys only getting a demo page by building? And is it possible for us to move the demo page onto github (under the gh-pages branch)?

Should we put every directive into its own module?

I sort of don't agree with this because it creates an extra barrier for simply dropping in code. Your module gains additional dependencies, or we have to update the common.js file every single time a new module is added.

Is there no interest in just doing ui.bootstrap?

Add Tree model.

Are there any idea to add tree model to angular-ui ?

GWT has some nice tree models like the one of side menu: http://ongwt.googlecode.com/svn/trunk/com.google.gwt.sample.showcase.Showcase/Showcase.html#CwCheckBox

Multiple modal messed up backdrop

I ran into an issue if you have multiple modal, the backdrop somehow will be messed up.

Since the var backdropEl;is shared across the directives, only one backdrop element will be inserted to body.

Therefore if you open a second modal before closing the first one and close it, the screen will have no backdrop when the first modal remains open.

I think there are two ways to fix this.

1. Movevar backdrop into link function, so every modal has its own backdrop.
2. Having a counter across the directives for keeping track how many modal is opened.

And elm.parent().append(backdropEl); instead of body.append(backdropEl);
in case the modal is inside of a template, when you load template, the a new backdrop will be appended to body.

Exception when using the accordion in conjunction with the Angular $routeProvider

Steps to reproduce

• Open http://plnkr.co/edit/k3ggcF?p=preview
• Open the JavaScript console in your browser
• In the right-hand side preview panel, click on the link "Open accordion"
• The $routeProvider will load the accordion.part template. Click on "Home" to return to the previous screen

Expected result

• The initial screen is displayed again

Actual result

• Nothing happens
• In the JavaScript console, an exception is displayed:

    TypeError: Cannot read property '$$childHead' of null
        at Object.e.$destroy (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:85:433)
        at Comment.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:12:129)
        at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:22:462
        at Array.forEach (native)
        at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:6:193)
        at Object.c [as handle] (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:22:433)
        at sb (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:20:51)
        at sa (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:19:290)
        at sa (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:19:342)
        at sa (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:19:342) 

Any way to support nested accordians?

ie

<accordion id="a1">
    <accordion-group heading="Section 1">
        <accordian id="a2">
            <accordion-group heading="Nested Section 1">Foo</accordion-group>
            <accordion-group heading="Nested Section 2">Foo</accordion-group>
            <accordion-group heading="Nested Section 3">Foo</accordion-group>
         </accordian>
    </accordion-group>
    <accordion-group heading="Section 2">Bar</accordion-group>
    <accordion-group heading="Section 3">Moo</accordion-group>
</accordion>

Relocate Pagination to AngularUI?

So, we've been discussing pagination for some time on AngularUI, and the Grid team has mentioned that they will be trying to introduce ui-virtualize which may be related to the UI project.

One of the things I am wanting to refocus on is utilities in AngularUI more than simple widgets. I believe that the pagination directive is not specific to Bootstrap and would be better suited in the AngularUI repo.

I want to eventually have our builder have a 'utilities' preset that does NOT contain any widgets from AngularUI so that it will not have any redundancy when used alongside projects like Bootstrap or others.

bs.config or ui.config

I am surprised you guys haven't already indoctrinated this practice yet because I think it's one of the best parts of AngularUI.

Any thoughts to adding this so that you can do app-wide configurations?

Improve tests for the tabs directive

There are 2 things that could be improved for the tabs directive:

• rendering of titles / content is not covered by tests (and we've got a title rendering broken even if all the tests are passing)
• there is a strange waits(100); instruction but tests are passing without it - not sure what is the reason for this instruction?

Carousel animation not working within simple partial

I have a seed application that incorporates angular-ui/bootstrap, angular-ui, among other implementations to showcase a more holistic set of angular capabilities (and at some point best practices).

I load the carousel exactly as you specify in the example, with the exception that the controller is specified via route (made identical changes to scope in the correct place).

The slide widget loads with no picture and no animation but with arrows showing, as long as the cursor is not over the widget. Once the cursor is moved off and back onto the widget, the animations "catch up" by at least two slides, and then pause.

The manual traverse always works.

I have a sense this is related to partials/dom parsing.

Partial here: https://github.com/robertjchristian/angular-enterprise-seed/blob/master/app/partials/playground/carousel.html.

is-open attribute not working correctly when accordion is hidden

http://plnkr.co/edit/iWHWYJ

There seems to be a resizing bug when the accordion is hidden. Tried hiding with ng-show in this exemple, but hiding with ng-class="{hide: !show}" did the same thing.

Seems to only happen if the accordion is hidden on initial load. Once you close and re-open the bugged group, it is possible to hide and show the accordion without any problems.

modal backdrop:"static" option

I noticed that the modal directive doesn't have the "static" option for the backdrop, while migrating from my custom, also bootstrap-based directive to this, much cleaner version.

The $dialog service has this, but that doesn't make the option in the modal directive useless, imho.

I solved it by simply adding the test to the bind function on the backdrop:

function open() {
    if (opts.escape) { body.bind('keyup', escapeClose); }
        if (opts.backdrop) {
            backdropEl.css('display', 'block').addClass('in');
            if(opts.backdrop != "static") backdropEl.bind('click', clickClose);
        }
//.......

I would make a pull request but don't know what is preferred behavior - to make it behave more like $dialog (i.e. add a backdropClick option) or behave like boostrap's original JS (i.e. something akin to my solution)

Register with Bower/Yeoman

I would love to use this library in my Yeoman project, but it's not registered with Twitter Bower, so I can't yeoman install it for all the benefits that come with package management.

I'm not sure what steps are necessary in order to convert the package.json into a component.json without creating a maintainence nightmare. Maybe it would be possible to double-dip the file (I'm not sure about the current state of the Bower naming convention), since the yeoman-angular generator currently scaffolds projects with a package.json file.

Build improvements

Some improvements to the build before a release:

• publish a minified version - done in 05c4857
• publish a version that has both templates and scripts so people got only one single file to include - done in 57ca4dd
• add version numbers to the build files - done in 2105dde

WDYT?

Remove node_modules from the checked-in files

Based on #37

We need to get rid of the checked-in node modules but to do so we need a markdown dependency on the Google server.

Strange Bootstraps DropdownToggle behavior with jQuery

Here is code includes Bootstrap DropdownToggle directive
http://plnkr.co/edit/REgeYHPrVZ6Lazf0vxGT
The dropdown menu want not close on click event. But if remove embedding jQuery script it becomes working.

Carousel Slides Deletion

I followed #18 and wanted to thank @joshkurz and @ajoslin for the work on the carousel.

Found an issue though. On line 22 you'll notice

index != self.selectedIndex

If the slides list is changed from one to another (forcing all previous slides to be deleted) and the current slide index is 0 the currentSlide is never changed when the new list comes into play.

This seems to cause issues when switching back to the original list of slides (from a non-zero index) as well when using the demo of setting the "active" field of an object.

Accordion: contents of all groups briefly shown on page load/show

This behavior is visible on the examples web page using up-to-date versions of either chrome or firefox on linux:

http://angular-ui.github.com/bootstrap/#/accordion

The contents of all parts of the accordion briefly expand and are then collapsed.

Same behavior occurs in a test page where accordion is inside an ui-if directive: when the if is toggled the accordion shows up expanded and then collapses. This is particularly bothersome if the accordion has a lot of content, as the whole page below it scrolls down and then bounces back up.

specifying default options

I'm using http://angular-ui.github.com/bootstrap/#/modal and http://angular-ui.github.com/bootstrap/#/tooltip and would like to be able to specify the following options for all my modals:
{
backdrop: true,
backdropClick: false,
backdropFade: true,
modalFade: true,
keyboard: false
}

as well as tooltip-animation="true" for all my tooltips.

Specifying default options doesn't seem to be documented though, and I haven't been able to figure it out by reading the source. Can anyone point me in the right direction please? If so, I can make a PR with this added to the docs if that would help.

"Remove tab" problem

Didn't removes tab after removing item from array. Content removes correctly

Modal dialog throws '$digest already in progress' at close.

When closing a dialog everything seems to work, but a "$digest already in progress" error is logged. I'm using the following code (and several variations):

$dialog.messageBox().open('dialogs/deleteDialog.html').then(function(result){
   if(result) {
      //delete stuff
       $route.reload();
   }
});

Add SEO tags to the demo landing page

We should add tricks to the home page so it is well indexed in Google. Currently the first result is the repo in @ajoslin account :-)

@ajoslin maybe it would be good to officially move your repo or something? Or at least update the readme in this repo to point to the angular-ui/bootstrap?

Change interface of the pagination directive - RFC

Finally had some time to look into the pagination directive (great stuff!) but I would like to propose changing its interface so users don't need to do all the calculations on their end.

Currently the interface looks like follows:
<pagination num-pages="numPages" current-page="currentPage" on-select-page="selectPageHandler(page)">

which means that users need to calculate number of pages on their side. Maybe it would be easier to have something like:

<pagination collection-size="myArray.length" page-size="10" current-page="currentPage" on-select-page="selectPageHandler(collectionFrom, collectionTo, page)">

With the interface like this people can just supply their array and don't have to do any calculations on their side.

WDYT?