How can I load a custom angular version into jsfiddle?
I want to use version 1.1.5 and not 1.1.1.
I would appreciate a working jsfiddle example.
Go into the External Resources Tab in the left sidebar:
Then add the url for a CDN that hosts Angular 1.1.5 http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:
Click the "+" button and you are all set:
UPDATE
Also, don't forget to set the framework to "No-Library (pure JS)" unless you want to use another framework such as jquery. Just don't set it to another version on angular
UPDATE
Here's a JSFiddle with Angular 1.1.5 working
http://jsfiddle.net/QFNLW/
In the left side bar, in "External Resources", add a link to the AngularJS library. For example from the Google CDN:
http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js
Related
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.
I just started using Angular for university purpose and I wanted to start easy so I just copied some stuff for the official Angular material page into my editor.
(Used bower to install angular-material "bower install angular-material")
This is my code (image, because they don't like HTML code here):
http://imgur.com/pr8YYvN
The button is showing up, but the fancy "click on" animation doesn't work and I cannot see the button description neither!
It was me who add the "." in front of every src/href (the button is not there on the original angular example page, but without the dot, the font won't even be in material style but just standard e.g. Arial)
Where is the problem, did I forget something?
Thanks in advance!
You are using the controller MainCtrl in your application, but you never actually created a MainCtrl in your JS. You also reference YourController in your JS, which is also not declared anywhere.
I recommend to read the error messages angular is giving you in the console.
Are there any conflicts between Angular UI-Bootstrap and Twitter Bootstrap?
I am trying to avoid using jQuery-UI with AngularJS if a more Angular-friendly UI package is available. I already started with Twitter Bootstrap, so I do not wish to unload Twitter Bootstrap.
No, there are no conflicts. Especially since ui-bootstrap is dependent on Twitter Bootstrap.
From the linked docs:
This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:
AngularJS (requires AngularJS 1.3.x, tested with 1.3.13). 0.12.0 is the last version of this library that supports AngularJS 1.2.x.
Bootstrap CSS (tested with version 3.1.1). This version of the library (0.13.0) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.
If you are going all in on Angular then stick with either AngularStrap or Angular UI Bootstrap, do not mix it with Twitter Bootstrap JS library. Both of the Angular projects mentioned utilize the Bootstrap CSS, but they completely replace the Bootstrap JS library, with pretty much all functionality included.
Apart from the unnecessary bloat to load both libraries, you'll end up with issues integrating the Bootstrap JS library with Angular for stuff like model binding.
Plunker: http://plnkr.co/edit/Sjfb3Esx1NsjwaYGLMGZ?p=preview
Accordion is in the servers tab.
The plunker actually works. My real app does not. The only thing that plunker is not really replicating is the ui-router stuff. On my actual app the accordion won't open. Other questions on SO say that ui.bootstrap is not included and that fixed their problem. I do have ui.bootstrap included though.
I've also tried copying and pasting the example from http://angular-ui.github.io/bootstrap/ that doesn't work either.
I'm at a loss for what else to look for.
More info:
I'm not getting any errors. Also other ui-bootstrap directives work just fine. I'm using tabs on this same page, and modal and dropdown work on other pages.
there is an issue with some version of angular-ui, the js assumes that one atleast one accordion is open and tries to calculate width. But bootstrap hides all accordions. So try displaying one accordion through css, i.e. set the display property of the accordion.
As per my comment:
It's my template. Somehow my template files are out of sync with the js files. In the template it is calling ng-click="toggleOpen()" which does not exist in my code. When I roll that back to ng-click="isOpen = !isOpen" everything works as expected. I need to figure out why my templates and js files are out of sync.
I installed ui-bootstrap using bower which does not include template files. I need to disable template caching during development so I can't use the tpls code. I downloaded the template directory from github and some of the templates simply do not match up with the version of code that bower downloads. I updated the template file to an older version that correctly matches the code from bower. Everything works now.
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