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
12
votes
5 answers

How to hide/show same modal instance with AngularJS?

I'm currently using angular-ui-bootstrap $modal to display a dialog which lets the user search for and pick a file. The list of files comes from box.com, so I use the box API to search for files and generate a thumbnail to display beside each file…
Guillaume Morin
  • 3,910
  • 6
  • 25
  • 40
12
votes
1 answer

Returning a value from a modal in Angular Bootstrap

I'm trying to use the modal directive from Angular Bootstrap to pop up a dialog, change a value (that was passed in) and then retrieve it. However, for some reason the value never gets updated in the scope. And, in fact, if I put in a "ng-change"…
Andrew Ducker
  • 5,308
  • 9
  • 37
  • 48
12
votes
5 answers

AngularJS and Twitter Bootstrap themes (or alternative?)

We're looking to build an app with a bootstrap theme (e.g. https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0) so that we can get UI that looks nice without investing too much in design. The problem is that we want to build it…
nickb
  • 882
  • 3
  • 8
  • 22
12
votes
1 answer

Wrapping the angular-ui tabset directive and encountering the "Multiple directives asking for transclusion/ isolated scope" errors

I'm trying to extend the angular-ui tabset functionality and I'm running into issues with wrapping it. This plunker is the tabset directive un-wrapped: http://plnkr.co/edit/AhG3WVNxCal5fZOUbSu6?p=preview This plunker contains my first attempt at…
12
votes
3 answers

Angular-ui tooltip with HTML

I am currently adding some bootstrap tooltips in my application. All of the "normal" tooltips are ok, but when I want to use tooltip-html-unsafe, all I got is an empty tooltip. My tooltip:
12
votes
1 answer

Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding

I am using angular-ui-bootstrap in my current project, and I have a requirement for a popover that will allow the user to take some action on a given element (rename/edit/delete/etc...). Since angular-ui's bootstrap popover doesn't allow for custom…
grailian
  • 720
  • 1
  • 8
  • 9
12
votes
1 answer

Using $scope functions from a different controller in AngularJS

I'd like to share the $scope functions of one controller in another controller, in this case for an AngularUI dialog. Specifically in the example below, I'd like $scope.scopeVar to be available in PopupCtrl. Here is a Plunkr Resolve code based on…
ozandlb
  • 1,024
  • 2
  • 10
  • 23
11
votes
4 answers

ValidationError: Progress Plugin Invalid Options

When I run my project from angular cli. it shows me this error. (image attached). I have updated my node_module files and search around many other platforms but... options should NOT have additional properties options should pass "instanceof"…
11
votes
4 answers

Datepicker-popup formatting not working when value set initially in scope

I am using the Angular UI bootstrap date picker popup using this custom directive on Plunker (http://plnkr.co/edit/053VJYm1MpZUiKwFTfrT?p=preview): //Module var userModule =…
11
votes
2 answers

Setting active tab on dynamically created tabs with Angular UI Bootstrap

I have a dynamic tabset that generates the tabs from an array which starts out blank. When I add a new item to the array it appears as a new tab. I want the last added tab to be the active one. I set the active index every time I add an item to the…
Volkan Paksoy
  • 6,727
  • 5
  • 29
  • 40
11
votes
1 answer

Angular-UI typeahead results not showing in dropdown

Im using Angular-ui typeahead component to hit an autocomplete API, and I'm parsing the data I get back into an array called resp. However, Im not seeing the data getting passed to the autocomplete dropdown in the UI. BTW, the controller has a…
11
votes
2 answers

How to use angular-ui-bootstrap (modals) in typescript?

I'd like to edit some data from a table using a modal. There are various interfaces in the typescript definitions for angular-ui-bootstrap from definitelyTyped, however they are undocumented and I'm not able to find any examples on how to use…
xvdiff
  • 2,179
  • 2
  • 24
  • 47
11
votes
2 answers

Call function after modal loads angularjs ui bootstrap

I am using Angularjs UI bootstrap to render Modal windows in my project. But In some situation I want to call a function after the modal loads. I have tried with $timeout and $viewContentLoaded but no use. can any one help me to resolve this issue.…
chandu
  • 2,276
  • 3
  • 20
  • 35
11
votes
3 answers

AngularJS - Accept a ui.bootstrap modal with ENTER key

The Issue: I've been unable to to accept a modal window with the ENTER key I have modified the default Plunker to show you what I've done since now --> Here What I have: Briefly, the ENTER key is recognized by the modal, but it doesn't trigger my…
domokun
  • 3,013
  • 3
  • 29
  • 55
11
votes
4 answers

How to set prevous-text and next-text attribute as HTML template in angular-ui bootstrap pagination directive

I'm going to use http://angular-ui.github.io/bootstrap/#pagination I need to set 'previous', 'next' indicators as html. something like: '" next-text="'
kriskodzi
  • 681
  • 2
  • 10
  • 18