Angularjs Как связать данные с виджетом SVG

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

Вопрос

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

Так что в моем проекте я рисую с помощью SVG & 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 .. в этом случае вы можете посоветовать мне, как это сделать?

<Сильное> Обновление:

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

Вы, ребята, у вас есть другие идеи на этом?

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

С уважением

Это было полезно?

Решение

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

BTW, используя SVG и угловой, не такая редкая вещь.Проверьте этот довольно удивительный пример: http://sullerandras.github.com/svg-sexence-diagram/

Другие советы

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top