2012-10-12 41 views
5

Sto costruendo un'app web AngularJS con finestre modali. Nella finestra modale, posso mostrare un grafico in tempo reale JQuery Flot, simile a questo: http://people.iola.dk/olau/flot/examples/realtime.htmlCome passare la variabile AngularJS in Javascript?

mio sito web mostra più utenti, ma il numero di utenti può essere diverso a seconda di ciò che viene selezionato. Mi piace mostrare un grafico per ogni utente. Questo è dove sono perplesso.

Ho copiato il codice Javascript da http://people.iola.dk/olau/flot/examples/realtime.html e lo mise in /js/flot/flot.user.js, e ha fatto questi cambiamenti:

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

mio AngularJS web app ha questo codice:

in index.app.html:

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

nel modello (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> 
... 

Ho bisogno di passare {{user.user_ID}} a flotChart (user_ID), ma flotChart ({{user.user_ID}}), come mostrato sopra, non funziona.

Qualcuno può suggerire una soluzione?

risposta

0

Sì, è una cosa difficile da pensare, il modo in cui siamo abituati ai modelli. Dal momento che non dovremmo veramente fare troppa manipolazione del DOM dal controller, probabilmente si vorrà creare una direttiva, here's an example.

Il test html:

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

Ecco il codice di esempio.

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

Hi @blesh: Ho già un tag BODY nel mio file index.app.html. Non penso di poter inserire un altro tag BODY nel mio file index.html (modello), posso? Il mio file modello inizia con il tag HEADER. Il valore di userId è nel mio file index.html (modello). ng-repeat creerà più file di utenti, ciascuno con il proprio userId. Non vedo come sia passato al codice Javascript. Suppongo che tu stia suggerendo che mi dimentico di passare i valori in {{userId}} al codice Javascript nel mio file HTML? AngularJS ha più file JS. In quali di questi file JS dovrei inserire il tuo codice? – Curt

1

mi piace la raccomandazione di blesh di usare una direttiva, ma lo consigliano la gestione un po 'diverso (mi dispiace, non ho la larghezza di banda in questo momento). Per il codice che hai, penso che tutto ciò che ti serve sia un piccolo aggiustamento.

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

incapsulamento in una direttiva è una soluzione migliore, tuttavia, se si è sotto la pistola e ha bisogno di vedere il lavoro, allora penso che questo è OK - per ora. Fammi sapere se questo funziona per te o no.

--dan

+0

Ho avuto domande per Blesh su come creare quella direttiva, poiché non vedo come posso creare quella direttiva. Mi dispiace per essere un principiante nelle direttive AngularJS. Hai commentato una riga di codice con ng-clic, che non è dove ho bisogno di aiuto, quindi probabilmente non avrei dovuto includerlo nel mio post. Qual è il piccolo aggiustamento che stai suggerendo? – Curt

+0

Scusa, non ho davvero risposto alla tua domanda. Vedrò se riesco a ricordarti di darti un po 'di codice più tardi questa settimana. Il piccolo tweak stava usando il binding bidirezionale in ng-click href ('#/profile/{{user.user_ID}}') –

Problemi correlati