Questions tagged [angular-bootstrap]

Bootstrap helpers module for AngularJs framework

Bootstrap components written in pure AngularJS by the AngularUI Team

Dependencies

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

  • AngularJS (requires AngularJS 1.2.x, tested with 1.2.16)
  • Bootstrap CSS (tested with version 3.1.1). This version of the library (0.11.2) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.

Files to download

Build files for all directives are distributed in several flavours: minified for production usage, un-minified for development, with or without templates. All the options are described and can be downloaded from here.

Alternativelly, if you are only interested in a subset of directives, you can create your own build.

Whichever method you choose the good news that the overall size of a download is very small: <20kB for all directives (~5kB with gzip compression!)

Installation

As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ui.bootstrap module: angular.module('myModule', ['ui.bootstrap']); You can fork one of the plunkers from this page to see a working example of what is described here.

CSS

Original Bootstrap's CSS depends on empty href attributes to style cursors for several components (pagination, tabs etc.). But in AngularJS adding empty href attributes to link tags will cause unwanted route changes. This is why we need to remove empty href attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application:

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

Homepage : http://angular-ui.github.io/bootstrap/

544 questions
66
votes
3 answers

angular js: Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

Am using the angular bootstrap to present a modal. But my requirement is to prevent pop-up dismissal when clicking outside the modal, or when the escape key is pressed. I followed the tutorial on the angular bootstrap site…
Vinodh
  • 5,207
  • 4
  • 35
  • 67
31
votes
4 answers

Using ui-router with Bootstrap-ui modal

I know this has been covered many times and most articles refer to this bit of code: Modal window with custom URL in AngularJS But I just don't get it. I don't find that to be very clear at all. I also found this jsfiddle which was actually great,…
Daimz
  • 3,123
  • 13
  • 46
  • 74
25
votes
1 answer

angular bootstrap dropdown to open on left

I have used angular bootstrap dropdown successfully link. But the problem it that the dropdown opens on the right side. How can i make it to open on left? Here is the markup and js i used from the given link. Markup:
Gaurav Gupta
  • 1,739
  • 3
  • 18
  • 36
20
votes
5 answers

Angular UI Bootstrap Modal: [$injector:unpr] Unknown provider: $uibModalInstanceProvider

This is a bit strange. When I search this issue online I see many pages of Google results and SO solutions... but none seem to work! In a nutshell, I am trying to implement AngularUI Bootstrap Modal. I keep getting the following error: Error:…
19
votes
3 answers

Strange angular-ui datepicker dependency error

Just re-installed some bower components but the components in question here were not updated, same 0.12.0 ui.bootstrap. Also using ui-router 0.2.13 to change state to another page. The odd error message is Error: [$compile:ctreq] Controller…
notbrain
  • 3,166
  • 2
  • 28
  • 42
16
votes
2 answers

How to display angular form validation error inside angular bootstrap popover?

I am new to angular js. I want to show the form error in angular bootstrap popover at the right hand side of the element.I tried to create the directive and I got an element when it changes classes. But I don't have an idea how to move…
svk
  • 4,205
  • 16
  • 56
  • 97
16
votes
5 answers

How to close Angular-bootstrap popover when clicking outside

I am attempting to close my Angular-bootstrap popovers when clicking anywhere outside the popovers. According to an answer to this question this can now be accomplished (in version 0.13.4) by utilizing the new popover-is-open attribute: Hide Angular…
15
votes
2 answers

Specify @Input() parameter for Angular root component/module

I have 3 root components that get bootstrapped by the root AppModule. How do you go about specifying an @Input() parameter to one of those components? Neither
jenson-button-event
  • 15,947
  • 8
  • 73
  • 144
13
votes
1 answer

Angular Unknown provider: $modalProvider <- $modal <- Controller

After upgrading to angular-bootstrap 1.2, this error occurred when loading my app: Unknown provider: $modalProvider <- $modal <- Controller
James Gentes
  • 5,882
  • 4
  • 36
  • 52
12
votes
4 answers

angular-bootstrap dropdown on mouseenter and keep dropdown-menu from hiding before being clicked.

First, I'm aware of this posts: Activating bootstrap dropdown menu on hover Bootstrap Dropdown with Hover How to make twitter bootstrap menu dropdown on hover rather than click And others, but still not found the correct solution yet, here's what I…
10
votes
2 answers

UI bootstrap carousel first slide doesn't show then crashes at last slide

I am trying to implement ui-bootstraps carousel but when the page loads the first image doesn't show but the controls and indicators do. Then, when the second image shows, I can use the controls to go back to the first image and it will show fine.…
Grant Jordan
  • 408
  • 6
  • 18
10
votes
3 answers

Using ng-click inside a tooltip

I'm using Angular Bootstrap UI and I have a working tooltip. HTML:
thank_you
  • 10,362
  • 17
  • 85
  • 173
10
votes
2 answers

angular-bootstrap collapse table row animation not transitioning smoothly

I'm running into an issue with angular-bootstrap collapse directive and CSS. Basically when you add the directive "collapse" to a div it works fine. But when you try to expand/collapse a table row it seems to have some issues with the transition…
10
votes
5 answers

In angular bootstrap tabs, how to cancel tab change?

I want to cancel tab change/panel switch when user clicks another tab and I discover that changes in the current panel are not saved. I use the deselect() attribute of element , documented here, to fire a function in my controller and in which…
wojjas
  • 856
  • 8
  • 20
10
votes
4 answers

up/down arrow key issue with typeahead control (angular bootstrap UI)

Check this PLNKR , i have implemented typeahead control, By default in type ahead control they are not setting any max-height or height to list, but as per requirement i have to fix height of list to 110px. So, when we have longer list at a time…
ankitd
  • 1,617
  • 3
  • 20
  • 38
1
2 3
36 37