AngularJS como vincular dados com widget SVG
-
12-12-2019 - |
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
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.