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

learn more… | top users | synonyms

2
votes
2answers
1k views

Customize AngularJS Bootstrap Tooltip

How do I add custom placements/animations to an AngularJS/Bootstrap tooltip? I can do: myApp.controller('TooltipCtrl', function ($scope) { $scope.htmlTooltip = 'Here is a tooltip!'; }); And it ...
0
votes
1answer
11 views

Ui bootstrap pagination, itemsPerPage in custom template?

Anyone tried to show itemsPerPage inside custom template? Haven't digged source enough but may be not accessible from inside..
7
votes
4answers
5k views

How do you Bind to Angular-UI's Carousel Slide Events?

I'm using Angular-UI's carousel and I need to tell my google charts to redraw after they have slid into view. In spite of what I've read, I can't seem to hook into the event. See my attempt: ...
1
vote
1answer
495 views
+50

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) { ...
0
votes
1answer
16 views

passing variables into angular-ui modal

I'm having some issues transferring the modal example from the angular-ui documentation here: https://angular-ui.github.io/bootstrap/#/getting_started I keep running into this error: Argument ...
0
votes
0answers
16 views

Unexpected end of input in ui-bootstrap file

I get this error whenever I load the page I am building. Everything worked fine until I copied the angular-ui-bootstrap js file. I have not changed anything from the file. ...
3
votes
4answers
11k views

What do I need to include that angular bootstrap just simply works

I have included these in my index.html because bower is including them: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- bower:js --> ...
2
votes
2answers
21 views

How to pass a result from modal of angular-ui-bootstrap to parent without closing?

according to the https://angular-ui.github.io/bootstrap/#/modal, I want to pass a result from modal to the parent without closing but in the example code, they only show a passing result to parent via ...
1
vote
3answers
56 views

Angular route inside modal

I have 2 routes: app.config(['$routeProvider', '$locationProvider', function( $routeProvider, $locationProvider) { $routeProvider. when("/list/:class", { controller: ...
4
votes
5answers
7k views

Angular-ui/bootstrap: pagination not rendered (missing styles?)

I'm new to angular-ui and playing with it. I'm trying to use the pagination directive (http://angular-ui.github.io/bootstrap/#/pagination), but it seems I'm missing some styles as I just see the ...
3
votes
3answers
10k views

How to translate Angular-UI-Bootstrap datepicker?

The documentation for the datepicker (Angle-UI-BootStrap) reports: Everything is formatted using the date filter and thus is also localized. Checking the documentation for the date filter can ...
1
vote
1answer
33 views

Error while using two modals: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance

I really find it very hard to solve the above error. I have two modals in my project. One of the modal is working fine and the other modal is not so. I have injected $modal as a dependency in the ...
0
votes
2answers
26 views

Bootstrap xs class is not resizing .thumbnail images correctly when screen becomes too small

I am new to Bootstrap, was going through w3schools lessons. I was trying following example: W3Schools Tryit Editor This example does not seem to work when I change the class from class="col-md-4" to ...
5
votes
1answer
5k views

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 ...
2
votes
1answer
29 views

How to add animation to angularjs uib-alert directive

I want to add fade-in animation for new alerts pushed into array and fade-out for dismissed alerts. Alerts are dismissed automatically after 5 seconds. I've already included angular-animate ...
0
votes
1answer
31 views

how to get all the events of the day in angular-bootstrap-calendar

Is there any option in angular-bootstrap-calendar to grab the day's with on-timespan-click = "dateClicked(eventsOfTheDay)" angular.module('myApp', ['mwl.calendar', 'ui.bootstrap']) ...
6
votes
4answers
1k views

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 ...
0
votes
1answer
13 views

uibModalInstance as an Optional Service

I have a situation that needs to use uibModalInstance as an optional injector. Because I need to use the same controller for two views. One is the popup view and other is normal view. When am using ...
16
votes
2answers
18k views

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: <ul> <li ...
4
votes
1answer
227 views

AngularJS Error Unknown provider: $$jqLiteProvider <- $$jqLite <- $animateCss <- $uibModalStack <- $uibModal

I trying to create a simple modal that pops up and gives different menu options. It should be easy, and I followed the Plunker for modals on the ui bootstrap site but I'm getting an error that says ...
1
vote
1answer
54 views

more link for angular ng-repeat show first few items

I have a scenario where I have Array of objects and I wanted to display on first few of them (should be configurable). var users = [{id:1234, name:'ABCD', role: 'XXX', lastLogin: 'XXXX'}, ...
18
votes
5answers
10k views

Hide Angular UI Bootstrap popover when clicking outside of it

I am trying to manually close a bootstrap popover to get it to close when I click anywhere on the document or body that isn't the popover. The closest thing I have found to accomplishing this is to ...
1
vote
1answer
1k views

Create custom angular-bootstrap typeahead data

I am having trouble with creating the list for bootstrap's ui-typeahead directive: An $http-call returns the following json: [{"title":"FOO", "equipment":[{"model":"Model 1"}, {"model":"Model 2"}], ...
3
votes
2answers
51 views

Angularjs : ui bootstrap : accordion “close-others” does not works

It seems that the "close-others" of the accordion in the UI bootstrap does not work, the example in Plunker is: here. I tried with the last version of "ui-bootstrap-tpls" but it gives a result which ...
2
votes
2answers
649 views

How do I dynamically style uib-accordion-group

I have created a uib-accordion in my Angular website and can get most of the functionality I want, with dynamic content changing accordingly. I am having trouble styling the uib-accordion-group ...
10
votes
3answers
6k views

wrapping inputs in directives in angular

I had the idea to wrap inputs into custom directives to guarantee a consistent look and behavior through out my site. I also want to wrap bootstrap ui's datepicker and dropdown. Also, the directive ...
2
votes
3answers
3k views

Showing a google map in angular-ui modal?

Trying to load a simple google map within an angular-ui modal. However no luck. The data get's passed in fine, but nothing works in terms of the map... Please help. ...
19
votes
4answers
28k views

Modal Window Issue (Unknown Provider: ModalInstanceProvider)

New to AngularJS and can't seem to find out what this error means. I've found a few others with the same error but it seems their issues don't correlate to mine. Unknown provider: $modalProvider ...
1
vote
2answers
38 views

Css style not working well when resizing chart height in angular application

Here is my plunker. I have passing json object to chart, i want to give width 100% to line chart and height to 100px, but when we minimizing height css does not work expected. The chart does not take ...
6
votes
1answer
7k views

how to show html on pop over using angular ui bootstrap?

I make demo of pop over like this .It show a pop over on right side when I click the button .But now problem is that how I will show some html on pop over . <html ng-app="plunker"> ...
0
votes
0answers
14 views

In angularjs ui-bootstrap, how can I set initial option in bootstrap-formhelpers-states, and avoid '? undefined:undefined ?' option?

I'm trying to resolve an old angularjs 'issue' which is actually expected behavior: 'Adding ng-model to predefined Select element adds undefined option' ...
0
votes
0answers
21 views

Show tooltip only when the text is truncated in angular UI bootstrap directive

I want to show angular UI bootsrap tooltip only when the text is truncated. I tried the below code with custom directive <div tooltip="{{value}}" tooltip-append-to-body="true" ...
1
vote
1answer
18 views

Activate specific tab after state change in angular

I have a web app built in AngularJS where I use $state to navigate through my different views. I'm also using several AngularUI Bootstrap components and styling, among other Bootstrap tabs. Now what ...
0
votes
1answer
21 views

angular date time model gives 1 day less

When i am binding date with angular model, the model variable gives value which is 1 day less from i actually selected, please see the code <!DOCTYPE html> <html> <head> ...
0
votes
2answers
33 views

Can you add Bootstrap to a Ionic App?

I am currently developing an Ionic app and I was wondering if I could add an image gallery based on Bootstrap. I know Ionic and Bootstrap don't work really well together, but I was wondering if it is ...
1
vote
3answers
329 views

Angular UI datepicker overrides placeholder text

I'd like to have custom placeholder text on the input field of my datepicker. Currently my placeholder text gets overridden by 'MM/DD/YYYY' Here's my html: <input type="text" id=" ...
0
votes
1answer
31 views

Angular UI TimePicker doesn't work correctly

I am creating an angular directive to handle some date time functionality. I am trying to use Angular's UI Bootstrap but I am getting a strange error with the TimePicker piece. It will show my ...
0
votes
0answers
26 views

AngularJS radio buttons ng-model not working when data-toggle used

If I click Yes or No, I expect the value to appear: feedback required: {{feedback.required}} but it does not until I remove the data-toggle attribute. <div class="btn-group" ...
5
votes
1answer
31 views

UI Bootstrap modal in directive- multiple modals but only one opens

As seen in this Plunkr, I have two modals, each in separate directive of modal-one and modal-two. The problem is, that only modal one is being opened, even when clicking on modal two button. I guess ...
15
votes
6answers
8k views

using ui.bootstrap causing issues with carousel

I am having issues with getting the carousel working properly. I used yeomen to scaffold the angular app. I am getting this error Error: [$compile:ctreq] Controller 'carousel', required by directive ...
1
vote
3answers
7k views

Error: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled […]

I am having this problem here and I haven't gotten any consistent solution so far looking out there. I am running a Java project with Angular on the front-end, and trying to implement an autocomplete ...
1
vote
1answer
14 views

UI Bootstrap - how to stop tooltip showing changed text before closing

I have a tooltip working on a glyphicon. When I click on the glyphicon I want to hide the tooltip, and then change the text of the tooltip. This reflects a change in state for the glyphicon which has ...
1
vote
1answer
30 views

UI Bootstrap - how to prevent tooltip opening when dropdown is open

I have a dropdown that is triggered by clicking a glyphicon. The glyphicon has a ui-bootstrap tooltip that is triggered on mouse-enter/mouse-leave. The tooltip is also triggered to close when the ...
0
votes
0answers
13 views

Open angular ui accordion using protractor and cucumber

I am new to cucumber and I have an accordion in my page containing dynamic data. I need to open the accordion in a protractor test case. Please help me out with this.
1
vote
0answers
11 views

angular-ui-bootstrap cdn name on cdnjs.cloudfare.com site not matching with bower name

When we do install angular-ui-bootstrap by command in bower like below bower install angular-bootstrap --save-dev Which will create folder named angular-bootstrap with data. Due to this task inside ...
0
votes
0answers
29 views

Angular: Bootstrap.UI Anchoring Modal from Click Source

I have been trying to wrap my head around how Google does their Modal initializing from click source without using Angular Material. Instead, I am using Boostrap.UI of Angular with Ng-Animate. ...
0
votes
1answer
24 views

Angular-UI bootstrap popover directive component

I developed a directive to maintain inline help for a widget from a dropdown bootstrap menu, but when I click help from the dropdown, the popover is currently bound to the element and cannot be ...
1
vote
1answer
20 views

Is there a way to configure the animation set on UI-bootstrap's carousel component?

An example of the standard configuration is here. Its crazy how limited the documentation is for many of the features that the UIB team created... I was wondering if anyone here has experience with ...
0
votes
0answers
28 views

using ui.bootstrap in angular js application

i am working on an angular application, that requires a table to be paginated. I have tried using dir-pagination by Michael Bromley but that didn't work out well when i tried to use ...
0
votes
1answer
59 views

ui-bootstrap modal html created and loaded, but isn't shown

I'm trying to display a simple modal using ui-bootstrap. As you can see in the photo, the html for the modal is loaded but not displayed. I saw some similar questions on the forum: AngularJS ...