AngularJS如何将数据与SVG小部件绑定答案

【问题标题】：AngularJS how to bind data with SVG widgetAngularJS如何将数据与SVG小部件绑定
【发布时间】：2012-05-28 18:04:02
【问题描述】：

我知道这通常不是使用 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>

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

更新：

非常感谢你们的回答！要求是小部件接受用户输入，并且我希望它不要放在 html 文件中（出于模块化目的）。因此，该指令似乎是目前的主要选择。在链接方法中，我将使用 RaphaelJS 绘制小部件，也可以绘制可编辑对象，但这样我就不会正确使用 AngularJS 绑定机制，它只是手表和事件处理程序......这对我来说似乎很乱。如果我可以通过某种方式将 SVG 标记放在指令的模板属性中并在模板中进行投标，那就太好了，但这似乎不受支持。

你们对此还有其他想法吗？

顺便说一句，有没有办法以编程方式在属性和使用 jQuery 获得的 HTML 元素（例如文本框）之间应用绑定？

问候

【问题讨论】：

标签： data-binding svg widget raphael angularjs

【解决方案1】：

您可以获取控制器，但这会使 SVG 和您的应用程序之间的整个通信由内而外地进行。而是颠倒应用程序的组成方式：让 angular 驱动应用程序并使用指令将 svg 包装到可重用的组件中，正如 Dan 提到的那样。

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

【讨论】：

【解决方案2】：

您应该考虑创建一个包装这些对象的 angularjs 指令。当绑定到角度范围的数据发生变化时，您需要执行一次 scope.$apply()。这是一个简单的答案，请查看http://docs.angularjs.org/guide/directive 文档。

【讨论】：