AngularJS cómo vincular datos con el widget SVG

Sé que esta no suele ser la manera de usar AngularJS, pero me preguntaba si lo que quiero lograr es factible con AngularJS. Si esta no es la forma recomendada, ¿podría darnos consejos sobre cómo lograr esto? Por favor considere que soy nuevo en el área de programación web.AngularJS cómo vincular datos con el widget SVG

Así que en mi proyecto dibujo usando SVG & RaphaelJS varios widgets en un lienzo que se coloca dentro del div "titular". Estoy intentando vincular estos widgets a datos usando AngularJS, básicamente cada widget está vinculado a un objeto en CustomController. ¿Cómo puedo acceder al CustomController cuando inicializo mis 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>

¿Es esto de todos modos para conseguir la unión de los widgets utilizando SVG AngularJS datos? Estoy empezando a pensar que este no es el propósito de AngularJS ... en este caso, ¿podrían aconsejarme cómo hacerlo?

ACTUALIZACIÓN:

chicos muchas gracias por sus respuestas! El requisito es que el widget acepte la entrada del usuario y que no se coloque en el archivo html (para fines de modularidad). Entonces, la directiva parece ser la elección principal por ahora. En el método de enlace dibujaría el widget usando RaphaelJS y también puedo dibujar los objetos editables, pero de esta manera no usaría correctamente el mecanismo de encuadernación AngularJS, serían solo relojes y manejadores de eventos ... lo cual me parece desordenado. Hubiera sido bueno si hubiera podido poner etiquetas SVG en la propiedad de la plantilla de la directiva y publicar en la plantilla, pero eso no parece ser compatible.

¿Ustedes tienen otras ideas al respecto?

Btw ¿hay alguna forma de aplicar enlaces programáticamente entre una propiedad y un elemento HTML (por ejemplo, cuadro de texto) obtenido con jQuery?

Saludos

Fuente

2012-05-22 Paul Chiritescu

Podrías agarrar el controlador, pero eso haría que toda la comunicación entre SVG y tu aplicación fuera de servicio. En su lugar, invierta la forma de compilar la aplicación: deje que angular la aplicación y envuelva el svg usando una directiva en un componente reutilizable como mencionó Dan.

btw utilizando SVG y angular no es algo tan raro. mira este ejemplo impresionante: http://sullerandras.github.com/SVG-Sequence-Diagram/

Fuente

2012-05-23 04:48:52

Usted debe mirar a la creación de una directiva AngularJS que envuelve estos objetos. Cuando cambian los datos que están ligados al alcance angular, necesita hacer un alcance. $ Apply(). Esta es una respuesta simplista, eche un vistazo al documento http://docs.angularjs.org/guide/directive.

Fuente

2012-05-23 00:05:17

AngularJS cómo vincular datos con el widget SVG

Respuesta

Cuestiones relacionadas