AngularJS wie man Daten mit dem SVG Widget bindet

Question

May 22, 2012, 10:56 AM

data-binding svg widget raphael angularjs

AngularJS wie man Daten mit dem SVG Widget bindet

Ich weiß, dass dies normalerweise nicht der Weg ist, AngularJS zu verwenden, aber ich habe mich gefragt, ob das, was ich erreichen möchte, mit AngularJS machbar ist. Wenn dies nicht der empfohlene Weg ist, geben Sie bitte Hinweise, wie dies erreicht werden kann. Bitte beachten Sie, dass ich neu im Bereich Webprogrammierung bin.

Deshalb zeichne ich in meinem Projekt mit SVG & RaphaelJS mehrere Widgets auf eine Leinwand, die sich innerhalb des div "holder" befindet. Ich versuche, diese Widgets mit AngularJS an Daten zu binden. Grundsätzlich ist jedes Widget mit einem Objekt im CustomController verknüpft. Wie kann ich auf den CustomController zugreifen, wenn ich meine Widgets initialisiere?

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

Soll damit trotzdem eine Datenbindung auf SVG-Widgets mit AngularJS erreicht werden? Ich fange an zu denken, dass dies nicht der Zweck von AngularJS ist. In diesem Fall könnten Sie mir bitte raten, wie das zu tun ist.

AKTUALISIEREN:

Jungs, vielen Dank für eure Antworten! Voraussetzung ist, dass das Widget Benutzereingaben akzeptiert und nicht in der HTML-Datei platziert werden soll (aus Gründen der Modularität). Daher scheint die Richtlinie vorerst die erste Wahl zu sein. In der Link-Methode würde ich das Widget mit RaphaelJS zeichnen und ich kann auch die bearbeitbaren Objekte zeichnen, aber auf diese Weise würde ich den AngularJS-Bindungsmechanismus nicht richtig verwenden, es wären nur Uhren und Event-Handler ... was mir chaotisch erscheint. Es wäre schön gewesen, wenn ich auf irgendeine Weise SVG-Tags in die template-Eigenschaft der Direktive hätte einfügen und in der Vorlage verbergen können, aber das scheint nicht unterstützt zu werden.

Habt ihr noch andere Ideen dazu?

Gibt es eine Möglichkeit, programmgesteuert Bindungen zwischen einer Eigenschaft und einem mit jQuery erhaltenen HTML-Element (z. B. einer Textbox) anzuwenden?

Grüße