Questions tagged [angular-ui-bootstrap]

A set of AngularJS directives based on Twitter Bootstrap's markup and CSS

Angular UI bootstrap is a set of AngularJS directives based on Twitter Bootstrap's markup and CSS.

The goal is to provide native AngularJS directives without any dependency on jQuery or Bootstrap's JavaScript. It is often better to rewrite an existing JavaScript code and create a new, pure AngularJS directive. Most of the time the resulting directive is smaller as compared to the original JavaScript code size and better integrated into the AngularJS ecosystem.

Directives

Stack Snippet Starter Pack

HTML:

<link href="//unpkg.com/bootstrap@3/dist/css/bootstrap.css" rel="stylesheet">
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

<div ng-app="ui.bootstrap.module" >
  <div ng-controller="ui.bootstrap.ctrl">

    <span uib-tooltip="{{ToolTipText}}" tooltip-placement="bottom" >
      Hover for Tooltip
    </span>

  </div>
</div>

JavaScript:

angular.module('ui.bootstrap.module', ['ui.bootstrap'])
.controller('ui.bootstrap.ctrl', function ($scope) {
  $scope.ToolTipText = "Hello, World!";
})

Related Tags

  • AngularStrap is light and fast. It has been built from the ground up to leverage ngAnimate!

Related Libraries

  • UI-Bootstrap 4 Bootstrap components written in pure AngularJS by the AngularUI Team. Ported to Bootstrap 4 by Morgul
4643 questions
15
votes
1 answer

dropdown of Navbar is double-clicked.

The used version is the following. ・AngularJS 1.2.16 ・Bootstrap3.1.1 ・AngularUI Bootstratp 0.11.0 var myApp = angular.module('app', ['ngRoute', 'ui.bootstrap']);
15
votes
3 answers

Angular JS render JSON in tree like format

How do I render JSON in tree like way just like http://jsonviewer.stack.hu/ does using angular JS?
15
votes
1 answer

Modal confirmation as an Angular UI directive

I'm trying to make an Angular directive with angular-bootstrap to mimic the confirm() function. Here is a plunk showing the visual result and behavior I want to achieve : http://embed.plnkr.co/27fBNbHmxx144ptrCuXV/preview Now I would like to use a…
mmai
  • 715
  • 1
  • 7
  • 15
15
votes
3 answers

Pass data to angular ui modal (lightbox effect)

Problem: I want to create a modal lightbox using the Angular UI Bootstrap modal Details: I have built a photo grid using ng-repeat. Each repeated photo opens the modal using the open() method. I'm struggling with how to pass the scope of the…
Kram62
  • 275
  • 1
  • 2
  • 7
15
votes
3 answers

Angular UI Bootstrap datepicker: ng-readonly support

Angular UI Bootstrap datepicker does not honors ng-readonly attribute. If ng-readonly expression is true, text input field is greyed and can not be modified, but datepicker's calendar pops up, allowing modification of form field. So far i tryed 3…
Vasily Redkin
  • 584
  • 1
  • 3
  • 17
15
votes
2 answers

AngularJS inject issue with Angular Bootstrap modal

I am integrating the modal from Angular Bootstrap and trying to adapt code sample from here to my app. I get the error: Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance What do I need to do to make $modalInstance…
cyberwombat
  • 38,105
  • 35
  • 175
  • 251
15
votes
3 answers

Fade effect for tabs in ui-bootstrap (Angular.JS)

How can I add fade animation to a tabset using angular-ui-bootstrap? For example, given the following code: Some content Other content I would like the content of the…
urish
  • 8,943
  • 8
  • 54
  • 75
15
votes
2 answers

$scope.myVariable not updated in controller for angular-ui bootstrap modal

In my view I have an input, a span and a button like so: When…
Cotten
  • 8,787
  • 17
  • 61
  • 98
15
votes
4 answers

access controller scope from Bootstrap-UI Typeahead template

I am unable to call a controller function from inside a custom-template with ui-typeahead:
recalcitrant
  • 939
  • 11
  • 23
15
votes
3 answers

Angular UI: Unknown provider: dialogProvider

I am trying to replicate the following Angular UI example of a simple dialog with a close-button. https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md. However, I cannot get the dialog parameter to be injected properly into my…
nip3o
  • 3,346
  • 4
  • 24
  • 29
14
votes
3 answers

Scrollbar thumb height in css

Is the height of scroll thumb set as default according to scroll-able area? If not, can I set scrollbar thumb height? If it is possible how? I tried to do it the following way. body::-webkit-scrollbar-thumb { background-color: darkgrey; …
AngularDoubts
  • 459
  • 2
  • 11
  • 30
14
votes
5 answers

How to display ui-boostrap tooltip on disabled button?

before posting here i searched and searched and i found several solutions for applying tooltips to disabled buttons, anyway none of these was using uib-tooltip from angular ui bootstrap. Here is the code of my button:
14
votes
2 answers

Angular-UI Router: Nested Views Not Working

Building a multi-step form (“wizard”). Was originally following this tutorial, which worked great, but am now trying to adapt it so step one is embedded on the homepage rather than being a separate state. No matter what I try, I can not create a…
14
votes
4 answers

Angular UI Bootstrap Module Not Closing on Back Button

I'm using a module from the UI Boostrap extensions (http://angular-ui.github.io/bootstrap). The module actually serves as a loading dialog and is automatically closed when a set of web service data is returned to my Angular code. As the data on…
Siegmund Nagel
  • 1,321
  • 2
  • 11
  • 19
14
votes
4 answers

How do I tell ui-Bootstrap what content to paginate?

I am using ui-Bootstrap and I am trying to get the pagination working but I seem to be missing something. I have read the documentation and looked at a bunch of plunkers to try and work out how they are specifying which content to paginate but I am…
Daimz
  • 3,243
  • 14
  • 49
  • 76