Hello everyone, I am new here but it seems like a great resource and will
be back more frequently! I am an atmospheric science student building a
webapp for my school (UIUC) to visualize weather forecasts. Right now my
page looks like this
http://www.atmos.illinois.edu/~turner23/DAS-VIS/old_index.html and the main
idea is to have a set of links on the left side which the user will click.
Upon clicking, the app will render a partial containing an animation.
It seemed simple enough, but I am having some problems rendering the
animation via a partial. If I take the code out of the partial and paste it
on the index page the animation works fine. If I try to use a partial, the
animation does not show up at all. Note I am using a JS library called
'JSani' to do the animations.
SAMPLE CODE:
*index.html*---without partial
<!DOCTYPE HTML><html ng-app> <head> <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js
<view-source:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js>"></script>
<script type="text/javascript" src = "app.js
<view-source:http://www.atmos.illinois.edu/%7Eturner23/DAS-VIS/app.js>"></script>
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
<view-source:http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css>">
<link rel="stylesheet" type="text/css" href="index.css
<view-source:http://www.atmos.illinois.edu/%7Eturner23/DAS-VIS/index.css>">
<script type="text/javascript" src="jsani/jsani.loader.js
<view-source:http://www.atmos.illinois.edu/%7Eturner23/DAS-VIS/jsani/jsani.loader.js>"></script>
</head> <body> <div class="container-fluid" ng-controller="AppCtrl">
<h3>UIUC DAS Forecast Visualization</h3> <hr> <div class="row-fluid">
<div class="col-md-3" id="form">links go here</div> <div
class="col-md-9">
<form name="jsani" id="jsani" action="#
<view-source:http://www.atmos.illinois.edu/%7Eturner23/DAS-VIS/old_index.html#>"
style="width:414px; height:326px;"> <input type="hidden"
name="config_file" value="config.txt"> </form>
</div> </div> </div> </body></html>
-------------------
*index.html --- with ng-include*
<div class="container-fluid" ng-controller="AppCtrl"> <h3>UIUC DAS
Forecast Visualization</h3> <hr> <div class="row-fluid"> <div
class="col-md-3" id="form">links go here</div> <div class="col-md-9">
<div ng-include src="'plot_partial.html'"></div>
</div> </div> </div>
* plot_partial.html*
<form name="jsani" id="jsani" action="#
<view-source:http://www.atmos.illinois.edu/%7Eturner23/DAS-VIS/old_index.html#>"
style="width:414px; height:326px;"> <input type="hidden"
name="config_file" value="config.txt"> </form>
--------------------------------
There is the code. I hope someone can make sense of this. Also, if any of you
have any other ideas for animating a series of images please let me know!!!
Thank you so much.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
