AngularJS如何将数据与SVG小部件绑定 [英] AngularJS how to bind data with SVG widget
问题描述
我知道这通常不是使用 AngularJS 的方式，但我想知道我想要实现的目标是否可以通过 AngularJS 实现.如果这不是推荐的方式，您能否提供有关如何实现此目的的提示?请考虑到我是网络编程领域的新手.
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.
所以在我的项目中，我使用 SVG &RaphaelJS 在画布上放置了几个小部件，这些小部件放置在持有人"div 中.我正在尝试使用 AngularJS 将这些小部件绑定到数据，基本上每个小部件都链接到 CustomController 中的一个对象.初始化小部件时如何访问 CustomController?
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>
这是否是为了使用 AngularJS 在 SVG 小部件上实现数据绑定?我开始认为这不是 AngularJS 的目的.在这种情况下，你能告诉我如何做到这一点吗?
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?
更新:
非常感谢你们的回答！要求是小部件接受用户输入，并且我希望它不要放在 html 文件中(出于模块化目的).因此，该指令似乎是目前的主要选择.在链接方法中，我将使用 RaphaelJS 绘制小部件，也可以绘制可编辑对象，但这样我就不会正确使用 AngularJS 绑定机制，它只是手表和事件处理程序......这对我来说似乎很乱.如果我可以通过某种方式将 SVG 标记放在指令的模板属性中并在模板中进行投标，那就太好了，但这似乎不受支持.
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?
顺便说一句，有没有办法以编程方式在属性和使用 jQuery 获得的 HTML 元素(例如文本框)之间应用绑定?
Btw is there any way to apply bindings programatically between a property and a HTML element (eg. textbox) obtained with jQuery?
问候
推荐答案
您可以获取控制器，但这会使 SVG 和您的应用程序之间的整个通信由内而外地进行.而是颠倒应用程序的组成方式:让 angular 驱动应用程序并使用指令将 svg 包装到可重用的组件中，正如 Dan 提到的那样.
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.
顺便说一句，使用 SVG 和 angular 并不是一件罕见的事情.看看这个非常棒的例子:http://sullerandras.github.com/SVG-Sequence-Diagram/
btw using SVG and angular is not such a rare thing. check out this pretty awesome example: http://sullerandras.github.com/SVG-Sequence-Diagram/
这篇关于AngularJS如何将数据与SVG小部件绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
