How to pass AngularJS variable to Javascript?

Question

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?

Dan Doyon · Accepted Answer · 2012-10-12 18:43:16Z

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

I had questions for Blesh on how to create that directive, as I don't see how I can create that directive. Sorry for being a newbie in AngularJS directives. You commented on a line of code with ng-click, which is not where I need help, so I probably shouldn't have included that in my posting. What is the minor tweak that you are suggesting?
Sorry didn't really answer your question. I'll see if I can remember to dredge you up some code later this week. The minor tweak was using the two-way binding in ng-click href('#/profile/{{user.user_ID}}')

Ben Lesh · Accepted Answer · 2012-10-12 18:06:38Z

Yeah, that's a tricky thing to think about, the way we're used to templates. Since we're not really supposed to do too much DOM manipulation from the controller, you'll probably want to create a directive, here's an example.

The test html:

<body ng-controller="MainCtrl"> UserId: {{userId}}<br/> <my-flot-chart ng-model="name"></my-flot-chart> </body>

Here's the example code.

app.controller('MainCtrl', function($scope) { $scope.userId = 123; }); function flotChart(userId) { alert('passed: ' + userId); } app.directive('myFlotChart', function(){ return { restrict: 'E', require: 'ngModel', link: function(scope, elem, attr, ctrl) { //create a new script tag and append it to the directive's element. var scr = document.createElement('script'); var text = document.createTextNode('flotChart(' + scope.userId + ')'); scr.appendChild(text); elem.append(scr); } } })

Hi @blesh: I already have a BODY tag in my index.app.html file. I don't think I can put in another BODY tag into my index.html (template) file, can I? My template file starts with the HEADER tag. The value of userId is in my index.html (template) file. ng-repeat will create multiple rows of users, each with its own userId. I don't see how that is passed to the Javascript code. I assume that you are suggesting that I forget about passing the values in {{userId}} to the Javascript code in my HTML file? AngularJS has multiple JS files. Which of these JS files should I put your code into?

Collectives™ on Stack Overflow

How to pass AngularJS variable to Javascript?

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related