I am trying to get a login modal showing when I click on login.
I am using bootstrap3, angularJS1.2 and angular-ui0.6
When I click on login, the transparent background of the modal shows but the popup never appears. When I check in the console, I can actually see the code populated but never manages to display it.
I am guessing that it is a problem with 1.2 animation and 0.6 not being up to date but I am not sure (I actually reverted back to < 1.2 and I run into the same problem.
Any idea what may be happening?
There is no support for Bootstrap 3 yet. This worked for me, however: ngEkathuwa.
AngularUI 0.6 does not work with BS3. I have been waiting for this particular fix to continue one of my projects. The modal view is specially broken. We have to wait till 0.7 comes out.
You'll need to build your own ui-bootstrap JS file, from a different branch, and use it instead (the angular-ui team is working on this separate branch to make it compatible with Bootstrap 3).
To build, just follow these steps (adapted from https://github.com/angular-ui/bootstrap/issues/331#issuecomment-25032867)
git clone https://github.com/angular-ui/bootstrap.git
cd bootstrap
git checkout origin/bootstrap3_bis2
npm install
grunt build
You'll find the new ui-bootstrap JS files in the ./dist/ folder.
Related
I have an Angular 1.5 Component that works fine on a vanilla HTML page, but when I try to embed it in a Bootstrap popover, it sort-of-only-but-not quite works.
The component does a little keyboard interception and filtering of keypresses, hooks into the model's formatting chain and uses a couple of other services and directives, but nothing too "funky".
The total and values[] attributes are passed through the scope, but while total displays, the values don't but the component does not how many entries there are in the values array. Nothing obvious is dumped out in the console.
I'm not sure where to start troubleshooting this one.
Code is available: https://github.com/jeffeld/bf-calculator.git
Clone, npm install and gulp default will build it. Test code is in index.html.
Many thanks,
Jeff
I am trying to build an application using d3js in WebStorm because I read that it is the best way to organize your AngularJS project.
However, when I start a new project, select AngularJS project there supposed to be a "hello world" example ready where you have your index.html pointing to view1 and then you click view2. But what happens in my case is that when I click run index.html view1 doesn't appear even when I click on the link leading to it or to view2.
Is there a configuration missing ? Do you know how I can correct that ?
Have you done a bower install to download all the dependencies your project needs ?
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.
Summary
While working on an angular based single page app (Ushahidi's v3 frontend), we stumbled over the following issue.
It occurs only in Chrome, not in Firefox (can't say anything about other browsers right now).
The problem is that an element (in our case: the login button) is not positioned correctly when we move its html into an directive (scenario 2), while it looks as expected when using the HTMl directly inside of the main page template (scenario 1).
The rendered HTML of the whole page is in both scenarios the same.
Reproducing both scenarios
You can reproduce both scenarios easily within about 3 minutes via the following steps (first getting the app running, then describing how to see both scenarios):
Quick app setup
needs only to be done once for both the working and not working state
Prerequisites
have node/npm installed
have gulp and napa installed
(sudo) npm install -g gulp napa
git clone https://github.com/spaudanjo/platform-client.git
cd platform-client
git fetch origin fix_T1107_chrome_layout_bug:fix_T1107_chrome_layout_bug
git checkout fix_T1107_chrome_layout_bug
(sudo) npm install
bower install
napa install
gulp --node-server --mock-backend
open Chrome with http://localhost:8080
Working state (scenario 1, without using directives)
git checkout ca99fdeb4613265063c0f481588c2e34ecd109ed
refresh Chrome
make sure that the top right menu looks like expected (the Login button is on the same line as "Create" and "Workspace")
Not working state (scenario 2, using directives)
git checkout 5fe22a68aea3c8cbf1497dc2c3c7f3d83ab822f3
refresh Chrome
make sure that you recognize the layout issue (the Login button is not placed correctly; see attached screenshot)
Changed files
To easily see the affected files, here is the diff of the commit which moves the directives HTML back again to the main template:
https://github.com/spaudanjo/platform-client/commit/ca99fdeb4613265063c0f481588c2e34ecd109ed
Any hints/ideas?
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.