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

Where is $dialog.messageBox() in Angular UI?

I could not find $dialog service in AngularUI and I tried to explore a simple messageBox() to create a confirmation dialog box using $modal. Could not find that either. Can somebody suggest me how to create a simple dialog (say for delete…
Sagar Ranglani
  • 5,491
  • 4
  • 34
  • 47
10
votes
1 answer

Why doesn't cursor change to pointer/hand on Tabs, Pagination, Dropdown Toggle etc in angular-ui-bootstrap?

I have to add the following code: to make cursor change to pointer/hand on links for Tabs, Pagination, Dropdown Toggle etc.. in angular-ui-bootstrap. Why doesn't it change to pointer by default?…
user2309998
  • 697
  • 2
  • 7
  • 11
10
votes
2 answers

Angular UI Bootstrap Modal strips id and class attributes

Live Example Adding the following Angular UI Bootstrap Modal:

Modal Here

results in: Why the id and class attributes are…
Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746
9
votes
2 answers

How to open ngbDatepicker on click of input

I want to open bootstrap 4 date picker on the click of input field. i don't want to display calender icon How can I resolve this issue?
Richa Shah
  • 93
  • 1
  • 3
9
votes
1 answer

change the height of ui.bootstrap.alert

I'm trying to add ui.bootstrap.alert based on this example: https://plnkr.co/edit/?p=preview. It works okay as following except that it's too big for me. So I changed the height in CSS and here's the new output .alert { margin-bottom: 1px; …
Hanks
  • 349
  • 1
  • 2
  • 15
9
votes
1 answer

Draggable Angular UI Modal loses focus

In this plunk I have an Angular UI modal with a draggable title bar. When you drag the bar, the entire modal moves. Problem is that if I move the mouse relatively fast up and down, the cursor loses focus on the bar and the modal stops moving. Any…
9
votes
1 answer

AngularJS [typeahead] reopen result dropdown on onFocus

I have problem in following use case in typeahead: Problem: user starts typing, dropdown opens and shows results user clicks out of the input field (nothing is deleted from the input field), dropdown closes user clicks back into the typeahead input…
9
votes
3 answers

Parse date string to Date object when loading Angular UI Bootstrap Datepicker

I'm using Angular UI Bootstrap Datepicker: https://angular-ui.github.io/bootstrap/#/datepicker When I render form using data received from the server, there is problem with datetime fields. My input datepicker looks like this:
rsobon
  • 1,012
  • 2
  • 12
  • 26
9
votes
4 answers

How to show HTML formatted content in Tooltip? (UI Calendar)

I'm trying to display content on multiple lines in the tooltip of calendar entry for UI Calendar and it is not working. Here is the code $scope.onEventRender = function(event, element, view) { if(event.hover_data) { $timeout(function(){ …
jagmohan
  • 2,052
  • 2
  • 26
  • 41
9
votes
2 answers

uib-popover-html won't accept my html string

I use the verions 0.14.2 of angular-ui-bootstrap. I was unable to display line returns in the popover. I use the popover-html directive, and a string such as Limite inférieure
Limite supérieure It gives the following error : Lexer Error:…
Yugo Amaryl
  • 1,249
  • 2
  • 15
  • 21
9
votes
1 answer

How to separate ng-template in separate file

I'm using angularUI typehead for the input element. I'm using custom template to show the values. Its all working fine. My question is how do i separate the ng-template into a separate file so that it can be re-used in other files as well. In case…
Sudhakar
  • 2,904
  • 8
  • 33
  • 47
9
votes
2 answers

Reload List after Closing Modal

I have a list of brands: