¿Cómo pasar la variable AngularJS a Javascript?

Estoy construyendo una aplicación web AngularJS con ventanas modales. En la ventana modal, puedo mostrar un gráfico en tiempo real jQuery Flot, similar a esto: http://people.iola.dk/olau/flot/examples/realtime.html ¿Cómo pasar la variable AngularJS a Javascript?

Mi sitio web muestra varios usuarios, pero el número de usuarios puede ser diferente dependiendo de lo que esté seleccionado. Me gusta mostrar un gráfico para cada usuario. Aquí es donde estoy perplejo.

He copiado el código Javascript de http://people.iola.dk/olau/flot/examples/realtime.html y la puso en /js/flot/flot.user.js, e hizo estos cambios:

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

Mi AngularJS aplicación web tiene este código:

en index.app.html:

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

en la plantilla (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> 
...

Necesito pasar {{user.user_ID}} a flotChart (user_ID), pero flotChart ({{user.user_ID}}), como se muestra arriba, no funciona.

¿Alguien puede sugerir una solución?

Fuente

2012-10-12 Curt

Sí, eso es algo difícil de pensar, la forma en que estamos acostumbrados a las plantillas. Dado que no se supone realmente hacer demasiado manipulación del DOM desde el controlador, es probable que desee para crear una directiva, here's an example.

La prueba de html:

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

Aquí está el código de ejemplo.

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); 
    } 
    } 
})

Fuente

2012-10-12 18:06:38

Hola @blesh: Ya tengo una etiqueta BODY en mi archivo index.app.html. No creo que pueda poner otra etiqueta BODY en mi archivo index.html (plantilla), ¿o sí? Mi archivo de plantilla comienza con la etiqueta HEADER. El valor de userId está en mi archivo index.html (plantilla). ng-repeat creará múltiples filas de usuarios, cada uno con su propio ID de usuario. No veo cómo se pasa eso al código Javascript. Supongo que está sugiriendo que me olvide de pasar los valores en {{userId}} al código Javascript en mi archivo HTML? AngularJS tiene varios archivos JS. ¿De cuáles de estos archivos JS debo poner su código? – Curt

me gusta la recomendación de Blesh de utilizar una directiva, pero recomendaría el manejo de un poco diferente (lo siento, no tengo el ancho de banda en estos momentos). Para el código que tienes, creo que todo lo que necesitas es un pequeño ajuste.

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

El encapsulado en una directiva es una mejor solución, sin embargo, si usted está bajo la pistola y necesita ver que funciona, entonces creo que esto está bien - por ahora. Avíseme si esto funciona para usted o no.

--Dan

Fuente

2012-10-12 18:43:16

Tenía preguntas para Blesh sobre cómo crear esa directiva, ya que no veo cómo puedo crear esa directiva. Perdón por ser un novato en las directivas de AngularJS. Comentó una línea de código con ng-click, que no es donde necesito ayuda, por lo que probablemente no debería haber incluido eso en mi publicación. ¿Cuál es el ajuste menor que estás sugiriendo? – Curt

Lamento no haber respondido realmente a su pregunta. Veré si puedo acordarme de sacarte un código más adelante esta semana. El ajuste menor usaba el enlace bidireccional en ng-click href ('#/profile/{{user.user_ID}}') –

¿Cómo pasar la variable AngularJS a Javascript?

Respuesta

Cuestiones relacionadas