2012-05-22 16 views
9

Tôi biết rằng đây không phải là cách để sử dụng AngularJS nhưng tôi đã tự hỏi liệu những gì tôi muốn đạt được có thể thực hiện được với AngularJS hay không. Nếu đây không phải là cách được đề nghị, bạn có thể đưa ra gợi ý về cách đạt được điều này không? Hãy xem xét rằng tôi mới trong lĩnh vực lập trình web.AngularJS cách liên kết dữ liệu với tiện ích SVG

Vì vậy, trong dự án của tôi, tôi vẽ bằng cách sử dụng SVG & RaphaelJS một số tiện ích trên canvas được đặt trong div "giữ". Tôi đang cố gắng để ràng buộc các vật dụng này với dữ liệu bằng cách sử dụng AngularJS, về cơ bản mỗi widget được liên kết với một đối tượng trong CustomController. Làm thế nào tôi có thể truy cập CustomController khi tôi khởi tạo các widget của tôi?

<html lang="en" style="height: 100%;" ng-app="myApp"> 
<head> 
    <script type="text/javascript""> 
    $(document).ready(function() { 
     var canvas = Raphael('holder', '800', '600'); 
     var widget1 = new Widget1(params); 
     // initialize widgets here, that I need to bind to data using AngularJS 
     // I am not able to access the CustomController here when drawing my widgets 
    }); 
    </script> 
</head> 
<body> 
    <div id="holder" ng-controller="CustomController"> 

    </div> 
</body> 
</html> 

Đây có phải là cách để kết nối dữ liệu trên các tiện ích SVG bằng AngularJS không? Tôi bắt đầu nghĩ rằng đây không phải là mục đích của AngularJS .. trong trường hợp này, bạn có thể vui lòng tư vấn cho tôi về cách thực hiện điều này không?

UPDATE:

Guys thanks a lot cho câu trả lời của bạn! Yêu cầu là widget chấp nhận đầu vào của người dùng và tôi muốn nó không được đặt trong tệp html (cho mục đích mô đun). Vì vậy, chỉ thị dường như là sự lựa chọn chính cho bây giờ. Trong phương thức liên kết, tôi sẽ vẽ widget bằng cách sử dụng RaphaelJS và tôi cũng có thể vẽ các đối tượng có thể chỉnh sửa nhưng theo cách này tôi sẽ không sử dụng cơ chế ràng buộc AngularJS, nó chỉ là đồng hồ và trình xử lý sự kiện ... có vẻ lộn xộn với tôi. Nó sẽ được tốt đẹp nếu một số cách tôi có thể đã đặt thẻ SVG trong tài sản mẫu của chỉ thị và làm đấu thầu trong mẫu, nhưng điều đó dường như không được hỗ trợ.

Các bạn có ý tưởng nào khác về điều này không?

Btw có cách nào để áp dụng các liên kết một cách có lập trình giữa một thuộc tính và một phần tử HTML (ví dụ: hộp văn bản) có được với jQuery không?

Kính trọng

Trả lời

14

Bạn có thể giữ bộ điều khiển, nhưng điều đó sẽ làm cho toàn bộ thông tin liên lạc giữa SVG và ứng dụng của bạn ở bên ngoài. Thay vào đó đảo ngược cách ứng dụng được tạo ra: Cho phép angular lái ứng dụng và bọc svg bằng cách sử dụng một chỉ thị vào một thành phần có thể tái sử dụng như Dan đã đề cập.

btw sử dụng SVG và góc cạnh không phải là điều hiếm gặp. hãy xem ví dụ tuyệt vời này: http://sullerandras.github.com/SVG-Sequence-Diagram/

2

Bạn nên xem xét việc tạo chỉ thị angularjs bao bọc các đối tượng này. Khi dữ liệu bị ràng buộc với các thay đổi phạm vi góc, bạn cần phải thực hiện phạm vi. $ Apply(). Đây là câu trả lời đơn giản, hãy xem tài liệu http://docs.angularjs.org/guide/directive.