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
0
votes
1 answer

Save data and scroll of previous state when opening new state in modal window (Instagram/Pinterest routing)

I want to create routing like on the Instagram/Pinterest. In my case - open full article in the modal window. From FAQ I find this code: $stateProvider.state("items.add", { url: "/add", onEnter: ['$stateParams', '$state', '$modal',…
Yaroslav Osetrov
  • 894
  • 1
  • 10
  • 13
0
votes
1 answer

How do I get a ui-view that is a button group with angular directive and angular bootstrap

So I'm trying to make it so that a directive can populate a btn-group, but having problems. If I put the btn btn-default classes in the directive html, it will group properly, but the buttons are inset into other buttons. If I put the btn…
Jon Thompson
  • 436
  • 4
  • 18
0
votes
1 answer

The function runs only once when updating parent controller scope in opened Angular UI Bootstrap Modal

I have a problem after refactoring code of Test Application backend. Test has questions and answers, each question has multiple answers and only one of them is correct. After some debugging everything seems to work fine, but all questions and…
0
votes
0 answers
0
votes
1 answer

how can I select a tab from outside controller

I'm using Tabs (ui.bootstrap.tabs) control\directive described here. The control creates it's own controller which sets active tab: .controller('TabsetController', ['$scope', function TabsetCtrl($scope) { var ctrl = this, tabs = ctrl.tabs =…
Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
0
votes
1 answer

Bootstrap modal and AngularJS

I am using AngularStrap in my application. I am tying to implement the modal feature of bootstrap. The problem is that I can't make it to show up my template modal. Here is a link to plunker. My template's id is test and I am referring in (like…
vlio20
  • 8,955
  • 18
  • 95
  • 180
0
votes
2 answers

Every time I add 'ui.bootstrap' dependency to my Angular module the page renders blank w/o errors

Like the title says each time I add 'ui.bootstrap' to my module dependency my page renders blank with no errors. If I remove it the page renders partially without the accordion menu and date picker. I had seen this similar StackOverflow problem but…
0
votes
1 answer

Error in installing angular-bootstrap-affix using bower

I am using this command to install mgcrea's angular-bootstrap-affix using bower : bower install angular-bootstrap-affix --save But it is showing the following error: ECMDERR Failed to execute "git ls-remote --tags --heads…
savinay narendra
  • 127
  • 1
  • 2
  • 10
0
votes
1 answer

How to remove the class from angular-bootstrap modal

I am using angular-bootstrap modal and trying to remove the slide down effect when it is closed. I tried to remove 'fade' class like this, but it didn't work. angular.module('myapp.directives', []) .directive 'modalWindow', ()-> …
0
votes
2 answers

Angularjs/Bootstrap - how to create a stateless button

Using Bootstrap and Angularjs I'd like to create a button that doesn't ever appear to be "active". I'd like the button to darken slightly when the mouse is over it, and I'd like it to darken further when it's clicked. When the mouse leaves the…
dB'
  • 7,838
  • 15
  • 58
  • 101
0
votes
1 answer

Resolve dependency from service in calling $modal dialog using angular-bootstrap

I have a angular-bootstrap modal dialog set up as such: var modalInstance = $modal.open({ templateUrl: '/views/core/common/modalProjectChange.html', controller: ModalChooseProjectCtrl, resolve: { …
onkami
  • 8,791
  • 17
  • 90
  • 176
0
votes
1 answer

Angular Typeahead - Static Array : Not working as expected

I picked the code from the angular bootstrap type-ahead folder and tweaked it to include the library dependencies. type-ahead When I launch the html, the model seems to be correctly bound but the typeahead suggestions are not showing up as it is in…
smaira
  • 307
  • 4
  • 19
-1
votes
0 answers

Can't bind to [(ngModel)] since it is not provided by any applicable directives But i have already added Forms module in app.module.ts

i have added Forms module in app.module.ts in my component while using [(ngModel)]="model" it shows Can't bind to [(ngModel)] since it is not provided by any applicable directives can you solve this error and fix and help me
-1
votes
1 answer

How to Create Count down timer selecting Time from the Time picker input and show the difference of selected Time to current Time in angular

This is my Typescript file import { Time } from '@angular/common'; import { Component, OnInit, Pipe, PipeTransform } from '@angular/core'; import { interval, Subscription, timer } from 'rxjs'; import {NgbTimeStruct} from…
Amir Shahzad
  • 182
  • 2
  • 10
-1
votes
2 answers

Angular 9 does not recognise HTML