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/

580 questions
68
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,262
  • 4
  • 38
  • 68
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,243
  • 14
  • 49
  • 76
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,929
  • 4
  • 21
  • 40
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,366
  • 2
  • 32
  • 42
17
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…
16
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
  • 18,101
  • 11
  • 89
  • 155
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,513
  • 18
  • 63
  • 100
13
votes
7 answers

How to close an Angular Bootstrap modal

I´m working with Angular 4, Firebase and Angular Bootstrap. I open the modal, which is a user form, and the idea is to close the modal as soon as the user logs in using one of the methods to login (google auth, Facebook auth or email and password…
Miguel Frias
  • 2,544
  • 8
  • 32
  • 53
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
  • 7,528
  • 7
  • 44
  • 64
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…
11
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,967
  • 3
  • 26
  • 44
10
votes
4 answers

unknown at rule @include css(unknownAtRules) error while including @include in css file

I am trying to customize card columns by using Bootstrap 4 card layout. But why it is showing error if i am writing this code in my css file? Error showing is in VS code: unknown at rule @include css(unknownatrules) HTML file
10
votes
4 answers

How can I remove Bootstrap from my Angular project?

I am attempting to use Material Design Bootstrap (MDB) in my Angular project. However, when I use an angular bootstrap component, it seems standard bootstrap interferes with the styling. Whats the best way to fully remove bootstrap from my angular…
Ethernetz
  • 906
  • 3
  • 16
  • 33
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
  • 428
  • 7
  • 19
1
2 3
38 39