AngularJS Cómo enlazar los datos con el widget de SVG

StackOverflow https://stackoverflow.com//questions/10698791

Pregunta

Sé que esto generalmente no es 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 proporcionar sugerencias sobre cómo lograrlo? Por favor, considere que soy nuevo en el área de programación web.

Entonces, en mi proyecto, dibujo usando SVG & Raphaeljs varios widgets en un lienzo que se coloca dentro del DIV del "titular". Estoy tratando de atar a estos widgets a los datos utilizando AngularJS, básicamente, cada widget está vinculado a un objeto en el 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 lograr la vinculación de datos en los widgets de SVG usando AngularJS? Estoy empezando a pensar que este no es el propósito de angularjs ... en este caso, ¿podría aconsejarme sobre cómo hacer esto?

Actualizar:

chicos ¡Muchas gracias por sus respuestas! El requisito es que el widget acepte la entrada del usuario y quiero que no se coloque en el archivo HTML (con fines de modularidad). Así que la directiva parece ser la opción principal por ahora. En el método de enlace, dibujaría el widget utilizando Raphaeljs y también puedo dibujar los objetos editables, pero de esta manera no usaría adecuadamente el mecanismo de enlace de AngularJS, sería solo relojes y manejadores de eventos ... lo que me parece desordenado. Hubiera sido agradable si alguna vez pudiera haber puesto etiquetas SVG en la propiedad de la plantilla de la directiva y hacer la biding en la plantilla, pero eso no parece ser compatible.

¿Tienen otras ideas en esto?

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

Saludos

¿Fue útil?

Solución

Puede obtener el controlador, pero eso haría toda la comunicación entre SVG y su aplicación en el lado.En su lugar, invierta cómo se compone la aplicación: deje que la APLICACIÓN ANGULAR APLICA la aplicación y envuelva la SVG utilizando una directiva en un componente reutilizable a medida que se menciona Dan.

Por cierto con SVG y angular no es una cosa tan rara.Echa un ejemplo de este muy impresionante ejemplo: http://sullerandras.github.com/svg-sence-diagram/

Otros consejos

Debe considerar crear una directiva angularJS que envuelva estos objetos.Cuando los datos que están vinculados a cambios de alcance angular, debe hacer un alcance. $ Aplicar ().Esta es una respuesta simplista, eche un vistazo a la http://docs.angularjs.org/guide/directive doc.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top