Jak przekazać zmienną AngularJS do Javascript?

Buduję aplikację internetową AngularJS z oknami modalnymi. W modalnego okna, mogę pokazać jQuery Flot wykres czasu rzeczywistego, podobną do tej: http://people.iola.dk/olau/flot/examples/realtime.html Jak przekazać zmienną AngularJS do Javascript?

Moja strona internetowa pokazuje wielu użytkowników, ale liczba użytkowników może być różny w zależności od tego, co jest zaznaczone. Chciałbym pokazać wykres dla każdego użytkownika. To tutaj jestem zaskoczony.

I skopiowany kod JavaScript z http://people.iola.dk/olau/flot/examples/realtime.html i umieścić go w /js/flot/flot.user.js i dokonaniu zmian:

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

Moja angularjs web app ma ten kod:

w index.app.html:

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

w szablonie (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> 
...

Muszę przekazać {{user.user_ID}} do flotChart (ID_użytkownika), ale flotChart ({{user.user_ID}}), jak pokazano powyżej, nie działa.

Czy ktoś może zaproponować rozwiązanie?

Źródło

2012-10-12 Curt

Tak, to jest trudne do myślenia, tak jak przywykliśmy do szablonów. Ponieważ nie jesteśmy naprawdę robić zbyt dużo manipulacji DOM ze sterownika, prawdopodobnie będziesz chciał stworzyć dyrektywę, here's an example.

HTML testową:

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

Oto przykładowy kod.

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

Źródło

2012-10-12 18:06:38

Hi @blesh: Mam już tag ciało w moim index.app.html pliku. Nie sądzę, żebym umieścił inny znacznik BODY w moim pliku index.html (szablon), czy mogę? Mój plik szablonu zaczyna się od tagu HEADER. Wartość identyfikatora użytkownika znajduje się w moim pliku index.html (szablon). ng-repeat utworzy wiele wierszy użytkowników, każdy z własnym identyfikatorem użytkownika. Nie widzę, jak to jest przekazywane do kodu Javascript. Zakładam, że sugerujesz, żebym zapomniał o przekazywaniu wartości z {{userId}} do kodu Javascript w moim pliku HTML? AngularJS ma wiele plików JS. Do którego z tych plików JS powinienem włożyć swój kod? – Curt

Lubię rekomendację blesh za stosowania dyrektywy, ale polecam obchodzenia się nieco inaczej (przepraszam, nie mam przepustowość teraz). Dla kodu, który masz, myślę, że wszystko czego potrzebujesz to drobna korekta.

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

Encapsulating w dyrektywie jest lepszym rozwiązaniem, jednak, jeśli jesteś pod pistoletem i trzeba zobaczyć, to działa to myślę, że to jest w porządku - do teraz. Daj mi znać, czy to działa dla Ciebie, czy nie.

--dan

Źródło

2012-10-12 18:43:16

Mam pytania do Blesha dotyczące tego, jak stworzyć tę dyrektywę, ponieważ nie widzę sposobu, w jaki mogę stworzyć tę dyrektywę. Przepraszamy za bycie nowicjuszem w dyrektywach AngularJS. Skomentowałeś wiersz kodu z ng-click, który nie jest tam, gdzie potrzebuję pomocy, więc prawdopodobnie nie powinienem uwzględnić tego w moim poście. Jakie są drobne poprawki, które sugerujesz? – Curt

Niestety, tak naprawdę nie odpowiedziałem na twoje pytanie. Zobaczę, czy pamiętam, żeby w tym tygodniu wydobyć jakiś kod. Niewielkie ulepszenie korzystało z dwukierunkowego powiązania w href ng-click ("#/profile/{{user.user_ID}}" –

Jak przekazać zmienną AngularJS do Javascript?

Odpowiedz

Powiązane problemy