AngularJS如何使用SVG小部件绑定数据

Question

AngularJS如何使用SVG小部件绑定数据

Pau*_*scu 9 data-binding svg widget raphael angularjs

我知道这通常不是使用AngularJS的方法,但我想知道我想要实现的是否可以使用AngularJS.如果这不是推荐的方式,请提供有关如何实现这一目标的提示？请考虑我是网络编程领域的新手.

所以在我的项目中,我使用SVG和RaphaelJS在画布上绘制了几个小部件,这些小部件位于"holder"div中.我试图使用AngularJS将这些小部件绑定到数据,基本上每个小部件都链接到CustomController中的对象.初始化我的小部件时如何访问CustomController？

<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>

Run Code Online (Sandbox Code Playgroud)

无论如何使用AngularJS实现对SVG小部件的数据绑定？我开始认为这不是AngularJS的目的..在这种情况下你能告诉我如何做到这一点吗？

更新:

伙计们非常感谢您的回答!要求是小部件接受用户输入,并且我希望它不被放置在html文件中(出于模块化目的).因此该指令似乎是目前的主要选择.在链接方法中,我将使用RaphaelJS绘制窗口小部件,我也可以绘制可编辑对象,但这样我就不能正确使用AngularJS绑定机制,它只是手表和事件处理程序......这对我来说似乎很麻烦.如果某种方式我可以将SVG标签放在指令的模板属性中并且在模板中进行操作,那将是很好的,但似乎不支持.

你们对此有其他想法吗？

顺便说一下,有什么方法可以在属性和使用jQuery获得的HTML元素(例如文本框)之间以编程方式应用绑定？

问候

Answer 1

Igo*_*nar 14

您可以掌握控制器,但这将使SVG和您的应用程序之间的整个通信内外.而是反转应用程序的组成方式:让角度驱动应用程序并使用指令将svg包装到Dan提到的可重用组件中.

顺便说一句使用SVG和角度并不是一件罕见的事情.看看这个非常棒的例子:http://sullerandras.github.com/SVG-Sequence-Diagram/

归档时间：	13 年，5 月前
查看次数：	10099 次
最近记录：	13 年，5 月前