5

我正在构建一个带有模态窗口的 AngularJS Web 应用程序。在模态窗口中，我可以显示一个 JQuery Flot 实时图表，类似于：   http ://people.iola.dk/olau/flot/examples/realtime.html

我的网站显示多个用户，但用户数量可能因所选内容而异。我喜欢为每个用户显示一个图表。这就是我难住的地方。

我从http://people.iola.dk/olau/flot/examples/realtime.html复制了 Javascript 代码并将其放入 /js/flot/flot.user.js ，并进行了以下更改：

//$(function () {
function flotChart(user_ID) {
...
//var plot = $.plot($("#placeholder"), [ getRandomData() ], options);
var plot = $.plot($("#chart_" + user_ID), [ getRandomData() ], options);
…

我的 AngularJS 网络应用程序有以下代码：

在 index.app.html 中：

<!DOCTYPE HTML>
<html ng-app="app">
...
<body ng-controller="AppCtrl">
...
<div class="container">
  <div ng-view></div>
</div>
...

在模板 (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>
...

我需要将 {{user.user_ID}} 传递给 flotChart(user_ID)，但是如上所示的 flotChart({{user.user_ID}}) 不起作用。

有人可以提出解决方案吗？

4

2 回答 2

1

我喜欢 blesh 关于使用指令的建议，但建议处理方式有所不同（抱歉，我现在没有带宽）。对于您拥有的代码，我认为您所需要的只是一个小调整。

<td ng-click="href('#/profile/{{user.user_ID}}')" data-dismiss="modal">{{user.user_name}}</td>

封装在指令中是一个更好的解决方案，但是，如果您在枪下并且需要看到它的工作，那么我认为这没关系 - 现在。让我知道这是否适合您。

- 担

于 2012-10-12T18:43:16.103 回答
0

是的，考虑到我们习惯于模板的方式，这是一件棘手的事情。由于我们真的不应该从控制器做太多的 DOM 操作，你可能想要创建一个指令，这里有一个例子。

测试html：

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

这是示例代码。

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);
    }
  }
})
于 2012-10-12T18:06:38.257 回答