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..in的目的，这种情况下，你可以请告诉我如何做到这一点？
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和侧出你的应用程序之间的整个通信。相反反转应用程序是如何构成的：让角驱动应用程序，并使用指令到一个可重用组件丹提到包裹SVG
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.
BTW使用SVG和角度是没有这样一个罕见的事情。看看这个pretty真棒例如：<一href=\"http://sullerandras.github.com/SVG-Sequence-Diagram/\">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屋！
