AngularJS, wie zum binden von Daten mit SVG-widget
Ich weiß, dass dies normalerweise nicht die Art der Verwendung von AngularJS, aber ich Frage mich, ob das, was ich will, zu erreichen, ist machbar mit AngularJS. Wenn dies nicht der empfohlene Weg, könnten Sie bitte geben Sie Hinweise, wie Sie diese erreichen? Bitte beachten Sie, dass ich bin neu in der web-Programmierung.
Also in meinem Projekt, das ich zeichnen mit SVG & RaphaelJS mehrere widgets auf einer Leinwand, die ist in der "Inhaber" div. Ich bin versucht zu binden, diese widgets, um Daten mit AngularJS, die im Grunde jedes widget steht in Zusammenhang mit einem Objekt in der CustomController. Wie kann ich auf die CustomController wenn Initialisiere ich meine widgets?
<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>Ist das überhaupt zu erreichen Datenbindung auf SVG-widgets mithilfe von AngularJS? Ich beginne zu glauben, dass dies ist nicht der Zweck von AngularJS..in diesem Fall könnten Sie bitte mir raten, wie dies zu tun?
UPDATE:
Jungs vielen Dank für Eure Antworten! Die Voraussetzung ist, dass das widget die Benutzereingaben entgegennimmt, und ich will es nicht in der html-Datei (für Modularität Zwecke). So die Richtlinie scheint zu sein, die primäre Wahl für jetzt. In der link-Methode würde ich ziehe das widget mit RaphaelJS und ich kann auch ziehen Sie den bearbeitbaren Objekten, aber diese Möglichkeit würde ich nicht richtig verwenden, die AngularJS Mechanismus für die Bindung, es wäre nur Uhren und event-Handler...das scheint chaotisch zu mir. Es wäre schön gewesen, wenn einige Möglichkeit, die ich habe SVG-tags in den template-Eigenschaft der Richtlinie und tun abwartend in der Vorlage, aber das scheint nicht unterstützt zu werden.
Habt Ihr andere Ideen dazu?
Btw gibt es eine Möglichkeit, um Bindungen programmgesteuert zwischen einer Eigenschaft und einem HTML-element (zB. textbox), die mit jQuery?
Hinsichtlich
Du musst angemeldet sein, um einen Kommentar abzugeben.
Konnte man halt den controller, aber das würde die ganze Kommunikation zwischen SVG und Ihre app in-side-out. Stattdessen umkehren, wie die Anwendung aus: Lassen Sie eckig fahren Sie die app, und wickeln Sie die svg mit einer Richtlinie in eine wiederverwendbare Komponente, wie Dan erwähnt.
btw mit SVG und eckig ist nicht so eine seltene Sache. überprüfen Sie heraus diese ziemlich genial Beispiel: http://sullerandras.github.com/SVG-Sequence-Diagram/
Sollten Sie auf die Erstellung eines angularjs-Direktive, umschließt diese Objekte. Wenn Daten, die gebunden ist an angular scope-änderungen, die Sie tun müssen, ein scope.$anwenden(). Dies ist eine vereinfachende Antwort, nehmen Sie einen Blick auf die http://docs.angularjs.org/guide/directive doc.