AngularJS how to bind data with SVG widget

I know that this is usually not the way to use AngularJS but I was wondering if what I want to achieve is doable with AngularJS. If this is not the recommended way could you please provide hints on how to achieve this? Please consider that I am new in the web programming area.

So in my project I draw using SVG & RaphaelJS several widgets on a canvas that is placed within the "holder" div. I am trying to bind this widgets to data using AngularJS, basically each widget is linked to an object in the CustomController. How can I access the CustomController when I initialize my 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>

Is this anyway to achieve data binding on SVG widgets using AngularJS? I am starting to think that this is not the purpose of AngularJS..in this case could you please advise me on how to do this?

UPDATE:

Guys thanks a lot for your answers! The requirement is that the widget accepts user input and I want it not to be placed in the html file (for modularity purposes). So the directive seems to be the primary choice for now. In the link method I would draw the widget using RaphaelJS and I can also draw the editable objects but this way I would not properly use the AngularJS binding mechanism, it would be just watches and event handlers...which seems messy to me. It would have been nice if some way I could've put SVG tags in the template property of the directive and do biding in the template, but that does not seem to be supported.

Do you guys have other ideas on this?

Btw is there any way to apply bindings programatically between a property and a HTML element (eg. textbox) obtained with jQuery?

Regards

You could get hold of the controller, but that would make the whole communication between SVG and your app in-side-out. Instead invert how the application is composed: Let angular drive the app and wrap the svg using a directive into a reusable component as Dan mentioned.

btw using SVG and angular is not such a rare thing. check out this pretty awesome example: http://sullerandras.github.com/SVG-Sequence-Diagram/

You should look at creating an angularjs directive that wraps these objects. When data that is bound to angular scope changes, you need to do a scope.$apply(). This is a simplistic answer, take a look at the http://docs.angularjs.org/guide/directive doc.

来源：https://stackoverflow.com/questions/10698791/angularjs-how-to-bind-data-with-svg-widget

标签

data-binding

svg

widget

raphael

angularjs