I am using AngularJS v1.6.3 and am trying to find a version of UI.bootstrap that works with it (in terms of Bootstrap's Javascript functionality, such as popover).
This Plunker uses UI.Bootstrap v0.12.0 and the popover works:
http://plnkr.co/edit/6ris13k1kZCGLvO7CP4B?p=preview
This Plunker uses UI.Bootstrap v2.5.0 and the popover does not work:
http://plnkr.co/edit/NS8OLrKXCfKdHrQ8TRwK?p=preview
This is the popover code that does not work in the latter:
<p>Click me and see popover on the right.</p>
I suspect I am doing something wrong. Thanks!
In newer versions of Angular UI Bootstrap, the directive name has been changed from popover to uib-popover. This is a fork of your 2nd Plunker in which the popover is displayed on the right of the link.
You can find the new directive name here
Related
I am using AngularJS 1.5.0 and Bootstrap 3.3.6.
I am trying to display the Bootstrap Modal Plugin using AngularJS.
It is easy to display using Bootstrap JS Modal
$("#myModal").modal() works with JQuery, but I need to get this working with AngularJS.
I suggest to install the UI Bootstrap which is a Bootstrap components written in pure AngularJS. Then you can use the Modal as seen in the Demo here
I just updated the version of Angular Material I am using to 1.0.6
Now when I use md-select + md-option, although all the correct options and corresponding md-option DOM elements display in the inspector, the drop down list does not display upon click, and instead the page (Chrome browser) freezes completely. No console error is thrown.
Here is my code:
md-select(
aria-label='select number of seats'
ng-show="bookable.seatsperbooking>1"
ng-model="appt.seats")
md-option(
ng-repeat='num in getnumber(seatsallowed) track by $index'
value='{{num}}') {{ num }}
and here is a screenshot of the inspector, which shows the correct number of option DOM elements:
screenshot of options
This was happening because the Angular + Angular Material versions I was using were incompatible. Angular Material 1.0.7 seems to require at least Angular 1.4 (Angular Material 1.0.7 was not working with Angular 1.3.20)
Having same problem.
After updating AngularJS to newer version 1.5.5 (w/ Angular Material 1.0.7) solved the problem.
Same issue here. I have Angular Material 1.1.0.
Updated Angular from 1.3.15 to 1.5.8. Fixed.
Here is a working example of Angular-ui-bootstrap typehead working with AngularJS 1.0.5:
http://plnkr.co/edit/me20JzvukYbK0WGy6fn4
The template uses ng-bind-html-unsafe witch is deprecated in AngularJS 1.2.0-rc3.
How can I bind html unsafe in that template? I would have used ng-bind but the filter typeaheadHighlight:query adds tags in match.model.title.
Thanks!
AngularJS removed the ng-bind-html-unsafe tag in its 1.2RC version which breaks the default typeahead template. But you have at least 2 ways to work-around it:
Move to the version 0.6.0 of the angular-ui/bootstrap library that has an equivalent tag named bind-html, here is a working plunk: http://plnkr.co/edit/D84pG1WwutE4lRU46FIs?p=preview
Include the ngSanitize module and use AngularJS built-in ng-bind-html directive: http://plnkr.co/edit/9Q2Zp3BTQbstv9AjvVg4?p=preview
An example copied directly from
http://angular-ui.github.io/bootstrap/
Does not work at all, neither locally nor in plunker. Don't know why. Bootstrap CSS is loaded, so is ui-bootstrap-tpls.min.js and angular.min.js (angular itself is working just fine though).
Here's the plunker:
http://plnkr.co/edit/15GWWFSUwab4VmaxfFPf
I am getting no js errors in a browser, yet it's not working.
Please help. I need to get this working on my website (i.e. the accordion doesn't work even when I write my own html/js code).
A plunker created from the demo site works flawlessly, just created a plunker from the demo site: http://plnkr.co/edit/z9RQKgNBTRbigyQs7OGW?p=preview
In your plunker you are not declaring dependency on the ui.bootstrap module as described on the very top of the demo page:
As soon as you've got all the files downloaded and included in your
page you just need to declare a dependency on the ui.bootstrap module:
angular.module('myModule', ['ui.bootstrap']);
After adding a dependency on the mentioned module your plunker works as well:
http://plnkr.co/edit/00bK0rNDYIrH9a9TVRk3?p=preview
One more thing - you need at least AngularJS 1.0.5 - there were bugs in earlier versions of AngularJS that prevented this directive from working correctly.
I'm using AngularJS with requireJS with angularstrap. Right now I simply want to get a datepicker working in my modal box which also uses angularstrap and bootstrap but I keep recieving the error:
Cannot read property 'dates' of undefined
myctrl1.js is the file that downloads datepicker.js and I have all my dependancies in main.js listed. I have never been able to get what should be a fairly simple thing to work so posting here is my last resort.
Plunkr here: LINK
Main files are index.html, controllers.js, myctrl.js
I had the same issue when using jQueryUI. This datepicker is incompatible with jQueryUI datepicker (both use datepicker name), so you should remove jQueryUI from your code or do some namespace workaround.
Perhaps you forgot add bootstrap-datepicker.js on your page. I had same problem and this was solution.