AngularJS como vincular dados com widget SVG

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

Pergunta

Eu sei que essa geralmente não é a maneira de usar o AngularJS, mas queria saber se o que desejo alcançar é possível com o AngularJS.Se esta não for a maneira recomendada, você poderia fornecer dicas sobre como conseguir isso?Por favor, considere que sou novo na área de programação web.

Então, no meu projeto eu desenho usando SVG e RaphaelJS vários widgets em uma tela que é colocada dentro da div "holder".Estou tentando vincular esses widgets a dados usando AngularJS, basicamente cada widget está vinculado a um objeto no CustomController.Como posso acessar o CustomController ao inicializar meus 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>

É assim que se consegue vincular dados em widgets SVG usando AngularJS?Estou começando a pensar que esse não é o propósito do AngularJS. Nesse caso, você poderia me aconselhar sobre como fazer isso?

ATUALIZAR:

Pessoal, muito obrigado por suas respostas!O requisito é que o widget aceite a entrada do usuário e eu quero que ele não seja colocado no arquivo html (para fins de modularidade).Portanto, a directiva parece ser a principal escolha neste momento.No método link eu desenharia o widget usando RaphaelJS e também posso desenhar os objetos editáveis, mas desta forma eu não usaria corretamente o mecanismo de ligação AngularJS, seriam apenas relógios e manipuladores de eventos... o que me parece confuso.Teria sido bom se de alguma forma eu pudesse colocar tags SVG na propriedade template da diretiva e fazer biding no template, mas isso não parece ser suportado.

Vocês têm outras idéias sobre isso?

Aliás, existe alguma maneira de aplicar ligações programaticamente entre uma propriedade e um elemento HTML (por exemplo.caixa de texto) obtida com jQuery?

Cumprimentos

Foi útil?

Solução

Você poderia obter o controlador, mas isso tornaria toda a comunicação entre o SVG e seu aplicativo de dentro para fora.Em vez disso, inverta a composição do aplicativo:Deixe o angular conduzir o aplicativo e agrupar o svg usando uma diretiva em um componente reutilizável, como Dan mencionou.

aliás, usar SVG e angular não é algo tão raro.confira este exemplo incrível: http://sullerandras.github.com/SVG-Sequence-Diagram/

Outras dicas

Você deve criar uma diretiva angularjs que envolva esses objetos.Quando os dados vinculados ao escopo angular mudam, você precisa fazer um scope.$apply().Esta é uma resposta simplista, dê uma olhada no http://docs.angularjs.org/guide/directive doutor.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top