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
18
votes
4 answers

angular-ui datepicker initial state of datepicker not formatted per datepicker-popup

I'm working with an angular-ui datepicker and everything is actually working fine, with the exception of the initial state of the datepicker. AFter I pick a date, it looks fine. See below: Initial State After Selecting a date in the picker So,…
Greg
  • 6,453
  • 9
  • 45
  • 61
18
votes
6 answers

angular-bootstrap modal dialog won't show despite seemingly correct call

I am trying to call modal dialog from an angular controller. The example is pretty simple and not far from very trivial. I have code such as $modal.open({ template: '
18
votes
3 answers

AngularUI-Bootstrap's Typeahead Can't Read `length` Property of `undefined`

I am getting the following error when I attempt to get a typeahead values from AngularUI-Bootstrap, using a promise. TypeError: Cannot read property 'length' of undefined at http://localhost:8000/static/js/ui-bootstrap-tpls-0.6.0.min.js:1:37982 …
Nicholas Pappas
  • 10,439
  • 12
  • 54
  • 87
18
votes
2 answers

Angular-UI $dialog and form submit on enter key

From what I can see, the recomended way to handle enter key in dialogs in AngularJS is to place a
tag and a submit button inside the dialog. Fair enough, but if you use Angular-UI and their $dialog service, the form will simply close silently…
Roger Johansson
  • 22,764
  • 18
  • 97
  • 193
17
votes
5 answers

Angularjs - $uibModal provider error

I'm trying to inject $uibModal into my project, however when the controller loads, I get the following error: Error: [$injector:unpr] Unknown provider: $uibModalProvider <- $uibModal <- abilityListController I'm using NuGet for my package…
KoalaFanatic
  • 181
  • 1
  • 1
  • 5
17
votes
6 answers

Unknown provider: $uibModalInstanceProvider - Bootstrap UI modal

I have a problem with UI Bootstrap modal. In one controller I have this: app.controller("tableCtrl",['$scope','$http','$uibModal','$log' ,function ($scope, $http,$uibModal,$log) { $scope.open = function (size,selectedUser) { var modalInstance =…
Marcinek
  • 173
  • 1
  • 1
  • 6
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…
17
votes
7 answers

How to remove outline appeared on click in Bootstrap UI Accordion

I'm trying to use angular-ui bootstrap accordion to hold bootstrap table inside the heading. When user clicks on the accordion heading and it opens, a strange outline appears. It looks like this (the light blue rectangle around "Some title"): I…
etaiso
  • 2,736
  • 3
  • 26
  • 38
17
votes
2 answers

Pagination in Angular UI Bootstrap throwing "Error: [$compile:nonassign]"

I'm using a fairly simple implementation of Angular Bootstrap UI's pagination directive, yet I keep getting an error I cannot figure out. Here's the relevant snippets:
  • {{todo}} …
Jonathan Guerrera
  • 971
  • 1
  • 9
  • 15
17
votes
2 answers

Globally configuring Angular directives

Some of the Angular UI Bootstrap directives, such as datepicker, have configuration instructions like this: "All settings can be provided as attributes in the or globally configured through the datepickerConfig." Although the…
Edward Brey
  • 40,302
  • 20
  • 199
  • 253
17
votes
3 answers

Stop propagation of underlying ng-click inside a jQuery click event

A Twitter Bootstrap dropdown is nested inside a tr. The tr is clickable through ng-click. Clicking anywhere on the page will collapse the dropdown menu. That behavior is defined in a directive through $document.bind('click', closeMenu). So, when…
17
votes
1 answer

returning data from angularjs modal dialog service

I am fairly new to AngularJS and having a problem with returning data from a modal dialog service. Basically, I copied Dan Wahlin's service http://weblogs.asp.net/dwahlin/archive/2013/09/18/building-an-angularjs-modal-service.aspx and am calling it…
16
votes
3 answers

angular-ui-bootstrap upgrade 1.3.3 to 2.0.0 missing uibAccordionGroup controller

Today I upgraded angular-ui-bootstrap package from 1.3 to 2.0 and the it throws me the error below. Error: [$compile:ctreq] Controller 'uibAccordionGroup', required by directive 'uibAccordionHeading', can't be found! …
16
votes
4 answers

Dropdown Causes Button To Lose Focus

Using Angular and Angular UI-Bootstrap. I have created a drop-down menu in textAngular. When you click on something other than the text-box or one of the menu options, it disables the menu. This is desired behavior. HOWEVER, when using FireFox,…
VSO
  • 11,546
  • 25
  • 99
  • 187
16
votes
1 answer

Angular-UI Modal resolve

Dear all I am new to Angularjs and I am trying creating a modal. One of the example I have found online (and currently following), is the below one, which I find difficult to understand. $scope.checkout = function (cartObj) { var modalInstance =…