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
202
votes
3 answers

What is the difference between ui-bootstrap-tpls.min.js and ui-bootstrap.min.js?

At the Angular-UI-Bootstrap page on cdnjs, is says: Native AngularJS (Angular) directives for Twitter's Bootstrap. Small footprint (5 kB gzipped!), no third-party JavaScript dependencies (jQuery, Bootstrap JavaScript) required! ... and has options…
Robert Christian
  • 18,218
  • 20
  • 74
  • 89
114
votes
11 answers

How do I increase modal width in Angular UI Bootstrap?

I am creating a modal: var modal = $modal.open({ templateUrl: "/partials/welcome", controller: "welcomeCtrl", backdrop: "static", scope: $scope, }); is…
Ivan Bacher
  • 5,855
  • 9
  • 36
  • 56
114
votes
5 answers

Extending AngularJs Directive

I'd like to make a minor modification to a 3rd party directive (specifically Angular UI Bootstrap). I simply want to add to the scope of the pane directive: angular.module('ui.bootstrap.tabs', []) .controller('TabsController', ['$scope',…
90
votes
4 answers

Can you override specific templates in AngularUI Bootstrap?

I'm curious if there's a way to override single, specific templates from the ui-bootstrap-tpls file. The vast majority of the default templates fit my needs, but there's a couple specific ones I'd like to replace without going through the whole…
Jeremy Privett
  • 4,455
  • 2
  • 32
  • 35
88
votes
2 answers

What is the difference between "dismiss" a modal and "close" a modal in Angular UI-Bootstrap?

What is the difference between "dismiss" a modal and "close" a modal? close(result) - a method that can be used to close a modal, passing a result dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
Green
  • 28,742
  • 61
  • 158
  • 247
82
votes
6 answers

Using Bootstrap for Angular and Material design for Angular together

I'm working on a project with this template. The template is written using AngularJs and Bootstrap-UI (bootstrap for angular) and I would like to include some Material Design elements like cards and others. Is it possible to do that? is it…
76
votes
4 answers

Responsive dropdown navbar with angular-ui bootstrap (done in the correct angular kind of way)

I've created a JSFiddle with a dropdown navbar using angular-ui-boostrap's module "ui.bootstrap.dropdownToggle": http://jsfiddle.net/mhu23/2pmz5/
74
votes
6 answers

Invoking modal window in AngularJS Bootstrap UI using JavaScript

Using the example mentioned here, how can I invoke the modal window using JavaScript instead of clicking a button? I am new to AngularJS and tried searching the documentation here and here without luck. Thanks
Ahmad Alfy
  • 13,107
  • 6
  • 65
  • 99
70
votes
3 answers

Best way to combine AngularJS and Twitter Bootstrap

I would like to combine AngularJS and Twitter Bootstrap into a fresh web app. It seems like AngularJS directives have been written for Bootstrap. However, on careful look, it seems that these directives don't cover all of Bootstrap. Can I combine…
67
votes
14 answers

Avoid having to double-click to toggle Bootstrap dropdown

I am using a Bootstrap dropdown menu. The problem is that it never drops down upon the first click; I need to click 2 times for it to be toggled. I guess the click event is somehow getting stuck somewhere before propagating down... Is there any way…
Jago
  • 2,751
  • 4
  • 27
  • 41
67
votes
4 answers

Mocking $modal in AngularJS unit tests

I'm writing a unit test for a controller that fires up a $modal and uses the promise returned to execute some logic. I can test the parent controller that fires the $modal, but I can't for the life of me figure out how to mock a successful…
user1539426
63
votes
13 answers

Angular bootstrap datepicker date format does not format ng-model value

I am using bootstrap date-picker in my angular application. However when I select a date from that date-picker underlying ng-model that I have bind gets updated I want that ng-model in one date format 'MM/dd/yyyy'. but it every times makes date like…
59
votes
5 answers

$watch not firing on data change

I have a watch setup against the model of a ui-select2 dropdown (from ui-bootstrap). The watch fires on load but not on data changes and I can't figure out why. It isn't the usual problem of not $apply'ing the model change or not using the third…
µBio
  • 10,668
  • 6
  • 38
  • 56
53
votes
7 answers

Is there a way to automatically close Angular UI Bootstrap modal when route changes?

I've got links in templates inside modals. When I click them, the current page changes, but the overlay and modal stay. I could add ng-click="dimiss()" to every link in all templates in modals, but is there a better way? E.g. to close it…
szimek
  • 6,404
  • 5
  • 32
  • 36
53
votes
3 answers

Scope issue in AngularJS using AngularUI Bootstrap Modal

plunker: http://plnkr.co/edit/wURNg8ByPYbEuQSL4xwg example.js: angular.module('plunker', ['ui.bootstrap']); var ModalDemoCtrl = function ($scope, $modal) { $scope.open = function () { var modalInstance = $modal.open({ templateUrl:…
Manuel Bitto
  • 5,073
  • 6
  • 39
  • 47
1
2 3
99 100