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

StackOverflow https://stackoverflow.com//questions/10698791

题

我知道这通常不是使用AngularJ的方式，但我想知道我想要实现的是什么，Angularjs是可行的。如果这不是推荐的方式，请您提供如何实现此目的的提示？请考虑我在Web编程区域中的新功能。

所以在我的项目中，我使用SVG＆RaphaelJS在画布上绘制了一个位于“持有人”div内的画布上的小部件。我正在尝试使用AngularJS将此小部件绑定到数据，基本上每个窗口小部件都链接到自定义控制器中的对象。当我初始化我的小部件时，如何访问自定义控制器？

<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标签并在模板中触摸，但这似乎并没有得到支持，这将很好。

你们有其他想法吗？

btw是有没有办法以使用jQuery获得的属性和HTML元素（例如，TextBox）之间编程地应用绑定？

关于

有帮助吗？

解决方案

您可以持有控制器，但这将使SVG和APP之间的整个通信在一起。相反，颠倒如何组成应用程序：让Angular驱动应用程序并将SVG用指令作为丹提到的可重用组件包装。

使用SVG和角度并不是如此罕见的事情。看看这个非常棒的例子： http://sullerandras.github.com/svg-sequence-diagram/

其他提示

您应该查看创建包裹这些对象的AngularJS指令。当绑定到角度范围的数据发生变化时，您需要执行范围。$申请（）。这是一个简单的答案，看看 doc。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top