5

モーダル ウィンドウを使用して AngularJS Web アプリを構築しています。モーダル ウィンドウで、次のような JQuery Flot リアルタイム チャートを表示できます:   http://people.iola.dk/olau/flot/examples/realtime.html

私の Web サイトには複数のユーザーが表示されますが、選択した内容によってユーザー数が異なる場合があります。各ユーザーのグラフを表示するのが好きです。これは私が困惑しているところです。

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 Web アプリには次のコードがあります。

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 に答える