Вопрос по widget, angularjs, raphael, svg, data-binding – AngularJS, как связать данные с SVG-виджетом

9

Я знаю, что обычно это не тот способ использования AngularJS, но мне было интересно, выполнимо ли то, чего я хочу достичь, с AngularJS. Если это не рекомендуемый способ, не могли бы вы дать подсказки о том, как этого добиться? Пожалуйста, учтите, что я новичок в области веб-программирования.

Так что в моем проекте я рисую, используя SVG & amp; RaphaelJS несколько виджетов на холсте, который помещен в «держатель» дела. Я пытаюсь привязать эти виджеты к данным, используя 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>

Это в любом случае для достижения привязки данных на виджеты SVG с помощью AngularJS? Я начинаю думать, что это не цель AngularJS .. в этом случае не могли бы вы посоветовать мне, как это сделать?

UPDATE:

Ребята, большое спасибо за ваши ответы! Требование заключается в том, что виджет принимает пользовательский ввод, и я хочу, чтобы он не помещался в html-файл (для целей модульности). Таким образом, директива кажется основным выбором на данный момент. В методе ссылки я бы нарисовал виджет, используя RaphaelJS, и я также мог бы нарисовать редактируемые объекты, но таким образом я бы не использовал должным образом механизм привязки AngularJS, это были бы просто часы и обработчики событий ... что мне кажется грязным. Было бы неплохо, если бы я мог как-то поместить SVG-теги в свойство шаблона директивы и выполнить связывание в шаблоне, но это, похоже, не поддерживается.

У вас есть другие идеи по этому поводу?

Кстати, есть ли способ программно применять привязки между свойством и элементом HTML (например, textbox), полученным с помощью jQuery?

С уважением

Ваш Ответ

2   ответа
14

Вы могли бы получить доступ к контроллеру, но это сделало бы всю связь между SVG и вашим приложением изнутри. Вместо этого инвертируйте, как составлено приложение: пусть Angular управляет приложением и оборачивает svg, используя директиву в повторно используемый компонент, как упоминал Дэн.

Кстати, использование SVG и Angular не такая уж редкость. посмотрите на этот замечательный пример:http://sullerandras.github.com/SVG-Sequence-Diagram/

2

Вы должны взглянуть на создание директивы angularjs, которая оборачивает эти объекты. Когда данные, связанные с угловой областью видоизменения, вам нужно сделать область действия. $ Apply (). Это упрощенный ответ, взгляните наhttp://docs.angularjs.org/guide/directive док.

Похожие вопросы