Làm cách nào để chuyển biến AngularJS sang Javascript?

Tôi đang xây dựng một ứng dụng web AngularJS với các cửa sổ phương thức. Trong cửa sổ phương thức, tôi có thể hiển thị biểu đồ thời gian thực của JQuery Flot, tương tự như sau: http://people.iola.dk/olau/flot/examples/realtime.html Làm cách nào để chuyển biến AngularJS sang Javascript?

Trang web của tôi hiển thị nhiều người dùng, nhưng số lượng người dùng có thể khác nhau tùy thuộc vào những gì được chọn. Tôi muốn hiển thị biểu đồ cho từng người dùng. Đây là nơi tôi đang bối rối.

tôi sao chép mã Javascript từ http://people.iola.dk/olau/flot/examples/realtime.html và đặt nó trong /js/flot/flot.user.js, và thực hiện những thay đổi:

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

AngularJS ứng dụng web của tôi có mã này:

trong index.app.html:

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

trong mẫu (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> 
...

Tôi cần chuyển {{user.user_ID}} thành flotChart (user_ID), nhưng flotChart ({{user.user_ID}}), như được hiển thị ở trên, không hoạt động.

Ai có thể đề xuất giải pháp?

Nguồn

2012-10-12 Curt

Vâng, đó là một điều khó khăn để suy nghĩ về, cách chúng ta đang sử dụng cho các mẫu. Kể từ khi chúng tôi không thực sự cần phải làm quá nhiều thao tác DOM từ bộ điều khiển, có thể bạn sẽ muốn tạo một chỉ thị, here's an example.

Các html kiểm tra:

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

Dưới đây là đoạn code ví dụ.

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

Nguồn

2012-10-12 18:06:38

Hi @blesh: Tôi đã có một thẻ BODY trong tập tin index.app.html tôi. Tôi không nghĩ rằng tôi có thể đặt một thẻ BODY khác vào tệp index.html (mẫu) của tôi, tôi có thể không? Tệp mẫu của tôi bắt đầu bằng thẻ HEADER. Giá trị của userId nằm trong tệp index.html (mẫu) của tôi. ng-repeat sẽ tạo nhiều hàng người dùng, mỗi hàng có userId riêng. Tôi không thấy cách nó được chuyển tới mã Javascript. Tôi cho rằng bạn đang gợi ý rằng tôi quên đi việc chuyển các giá trị trong {{userId}} sang mã Javascript trong tệp HTML của tôi? AngularJS có nhiều tệp JS. Tôi nên đặt mã của mình vào những tệp JS nào trong số những tệp JS này? – Curt

Tôi thích đề xuất của blesh về chỉ thị, nhưng sẽ đề xuất xử lý hơi khác (xin lỗi, hiện tại tôi không có băng thông). Đối với mã mà bạn có, tôi nghĩ rằng tất cả những gì bạn cần là một tinh chỉnh nhỏ.

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

Đóng gói trong chỉ thị là giải pháp tốt hơn, tuy nhiên, nếu bạn ở dưới súng và cần xem nó thì tôi nghĩ điều này là ổn - hiện tại. Hãy cho tôi biết nếu điều này làm việc cho bạn hay không.

--dan

Nguồn

2012-10-12 18:43:16

Tôi có câu hỏi về Blesh về cách tạo chỉ thị đó, vì tôi không thấy cách tôi có thể tạo chỉ thị đó. Xin lỗi vì là một newbie trong AngularJS chỉ thị. Bạn đã nhận xét về một dòng mã với ng-click, đó không phải là nơi tôi cần sự giúp đỡ, vì vậy tôi có lẽ không nên đưa nó vào bài đăng của tôi. Tinh chỉnh nhỏ mà bạn đang đề xuất là gì? – Curt

Xin lỗi đã không thực sự trả lời câu hỏi của bạn. Tôi sẽ xem nếu tôi có thể nhớ để nạo vét bạn lên một số mã vào cuối tuần này. Tinh chỉnh nhỏ là sử dụng liên kết hai chiều trong ng-click href ('#/profile/{{user.user_ID}}') –

Làm cách nào để chuyển biến AngularJS sang Javascript?

Trả lời

Các vấn đề liên quan