How to pass AngularJS variable to Javascript?

2019-06-23 14:46发布

站内问答 / JavaScript
646 2 6

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?

2条回答
戒情不戒烟
2楼-- · 2019-06-23 15:15

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);
    }
  }
})
查看更多
0人赞 添加讨论(0) 举报
干净又极端
3楼-- · 2019-06-23 15:27

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)