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

发布时间：2020-12-17 09:52:50 所属栏目：安全来源：网络整理

导读：我知道这通常不是使用AngularJS的方式,但我想知道我想要实现的是否可以使用AngularJS.如果这不是推荐的方式,请提供如何实现这一点的提示？请考虑我在网络编程领域是新的. 所以在我的项目中,我画SVG RaphaelJs在画布上放置了“持有人”div的几个小部件.我正在

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

所以在我的项目中,我画SVG& RaphaelJs在画布上放置了“持有人”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标签放在指令的模板属性中,并且在模板中进行绑定,那么这本来是不错的,但这似乎不被支持.

你们有其他想法吗？

Btw是否有任何方法在使用jQuery获得的属性和HTML元素(例如textbox)之间进行编程应用绑定？

问候

您可以掌握控制器,但这将使得SVG与您的应用程序之间的整体沟通成为可能.而是反转应用程序的组合方式：让角度驱动应用程序,并使用指令将svg包装到可重用的组件中,如Dan所述.

btw使用SVG和角度不是这么罕见的事情.看看这个非常棒的例子：http://sullerandras.github.com/SVG-Sequence-Diagram/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!