Menu
I am building a AngularJS web app with modal windows. In the modal window, I can show a JQuery Flot real time chart, similar to this: http://people.iola.dk/olau/flot/examples/realtime.html
My website shows multiple users, but the number of users can be different depending on what is selected. I like to show a chart for each user. This is where I am stumped.
I copied the Javascript code from http://people.iola.dk/olau/flot/examples/realtime.html and put it in /js/flot/flot.user.js , and made these changes:
//$(function () {
function flotChart(user_ID) {
...
//var plot = $.plot($("#placeholder"), [ getRandomData() ], options);
var plot = $.plot($("#chart_" + user_ID), [ getRandomData() ], options);
…
My AngularJS web app has this code:
In index.app.html :
<!DOCTYPE HTML>
<html ng-app="app">
...
<body ng-controller="AppCtrl">
...
<div class="container">
<div ng-view></div>
</div>
...
In the template (index.html) :
...
<!-- Modal window -->
<script src="/js/flot/flot.user.js"></script>
<table class="table table-condensed">
<tr ng-repeat="user in users">
<td ng-click="href('#/profile/'+user.user_ID)" data-dismiss="modal">{{user.user_name}}</td>
<td>
<script type="text/javascript">
flotChart({{user.user_ID}});
</script>
<div id="chart_{{user.user_ID}}" style="width:100%;height:150px;"></div>
</td>
...
I need to pass {{user.user_ID}} to flotChart(user_ID), but flotChart({{user.user_ID}}), as shown above, does not work.
Can anybody suggest a solution?
451
I like blesh's recommendation of using a directive, but would recommend handling a bit differently (sorry, i don't have the bandwidth right now). For the code that you have, I think all you need is a minor tweak.
<td ng-click="href('#/profile/{{user.user_ID}}')" data-dismiss="modal">{{user.user_name}}</td>
Encapsulating in a directive is a better solution, however, if you are under the gun and need to see it work then I think this is OK -- for now. Let me know if this works for you or not.
--dan
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
