2012-05-22 11 views
9

के साथ डेटा को बाध्य करने के लिए कैसे करें मुझे पता है कि यह आमतौर पर एंगुलरजेएस का उपयोग करने का तरीका नहीं है, लेकिन मैं सोच रहा था कि जो मैं हासिल करना चाहता हूं वह AngularJS के साथ करने योग्य है। यदि यह अनुशंसित तरीका नहीं है तो क्या आप इसे प्राप्त करने के तरीके पर संकेत प्रदान कर सकते हैं? कृपया ध्यान दें कि मैं वेब प्रोग्रामिंग क्षेत्र में नया हूं।एंगुलरजेएस एसवीजी विजेट

तो मेरी परियोजना में मैं एसवीजी & राफेलजेएस का उपयोग कर कैनवास पर कई विजेट्स को "धारक" div के भीतर रखा गया है। मैं AngularJS का उपयोग कर डेटा को इस विजेट को बांधने की कोशिश कर रहा हूं, मूल रूप से प्रत्येक विजेट कस्टमकंट्रोलर में किसी ऑब्जेक्ट से जुड़ा हुआ है। जब मैं अपने विजेट्स को प्रारंभ करता हूं तो मैं कस्टम कंट्रोलर तक कैसे पहुंच सकता हूं?

<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> 

इस वैसे भी AngularJS का उपयोग कर एसवीजी विगेट्स पर बाध्यकारी डेटा प्राप्त करने के लिए है? मुझे लगता है कि यह AngularJS..in का उद्देश्य नहीं है, इस मामले में आप कृपया मुझे सलाह दे सकते हैं कि यह कैसे करें?

अद्यतन:

दोस्तों धन्यवाद आपके उत्तर के लिए एक बहुत! आवश्यकता यह है कि विजेट उपयोगकर्ता इनपुट स्वीकार करता है और मैं चाहता हूं कि इसे HTML फ़ाइल में नहीं रखा जाए (मॉड्यूलरिटी उद्देश्यों के लिए)। तो निर्देश अब के लिए प्राथमिक पसंद प्रतीत होता है। लिंक विधि में मैं राफेलजेएस का उपयोग करके विजेट खींचूंगा और मैं संपादन योग्य वस्तुओं को भी आकर्षित कर सकता हूं लेकिन इस तरह मैं एंगुलरजेएस बाध्यकारी तंत्र का सही ढंग से उपयोग नहीं करता, यह केवल घड़ियों और घटना हैंडलर होगा ... जो मुझे गन्दा लगता है। यह अच्छा होगा अगर मैं कुछ तरीकों से निर्देश के टेम्पलेट प्रॉपर्टी में एसवीजी टैग डाल सकता हूं और टेम्पलेट में बोली लगा सकता हूं, लेकिन ऐसा लगता है कि यह समर्थित नहीं है।

क्या आपके पास इस पर अन्य विचार हैं?

बीटीडब्ल्यू एक संपत्ति और एक HTML तत्व (उदाहरण के लिए टेक्स्टबॉक्स) के बीच प्रोग्रामिंग रूप से बाइंडिंग लागू करने का कोई तरीका है?

सादर

उत्तर

14

आप नियंत्रक को पकड़ सकते हैं, लेकिन इससे एसवीजी और आपके ऐप के बीच-साथ पूरा संचार होगा। बदले में एप्लिकेशन को कैसे बनाया गया है: एंजुलर को ऐप ड्राइव करने दें और एसईजी को एक पुन: प्रयोज्य घटक में निर्देश का उपयोग करके लपेटें क्योंकि दान का उल्लेख है।

एसवीजी और कोणीय का उपयोग कर बीटीडब्ल्यू ऐसी दुर्लभ चीज नहीं है। यह बहुत बढ़िया उदाहरण देखें: http://sullerandras.github.com/SVG-Sequence-Diagram/

2

आप एक AngularJS निर्देश है कि इन वस्तुओं लपेटता बनाने पर गौर करना चाहिए। जब कोणीय गुंजाइश में बाध्य डेटा होता है, तो आपको एक दायरा करने की आवश्यकता होती है। $ लागू()। यह एक सरल उत्तर है, http://docs.angularjs.org/guide/directive दस्तावेज़ पर एक नज़र डालें।