Angularjs Comment connecter des données avec widget SVG

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

Question

Je sais que ce n'est généralement pas la façon d'utiliser angularjs mais je me demandais si ce que je veux réaliser est faisable avec Angularjs. Si ce n'est pas le moyen recommandé pourriez-vous fournir des conseils sur la manière de y parvenir? Veuillez considérer que je suis nouveau dans la zone de programmation Web.

Donc, dans mon projet, je dessine à l'aide de SVG & RAPHAELJ plusieurs widgets sur une toile placée dans le "titulaire" div. J'essaie de lier ces widgets à des données à l'aide d'Angularjs, fondamentalement, chaque widget est lié à un objet dans la CustomController. Comment puis-je accéder à la CustomController lorsque j'initialise mes widgets? 

<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>

Est-ce de toute façon pour obtenir une liaison de données sur les widgets SVG à l'aide d'Angularjs? Je commence à penser que ce n'est pas le but de l'angularjs.. dans ce cas, pourriez-vous vous conseiller sur la façon de faire cela?

mise à jour:

Les gars merci beaucoup pour vos réponses! L'exigence est que le widget accepte l'entrée de l'utilisateur et je souhaite qu'il ne soit pas placé dans le fichier HTML (à des fins de modularité). La directive semble donc être le choix principal pour le moment. Dans la méthode de lien, je dessinerais le widget à l'aide de Raphaeljs et je peux également dessiner les objets modifiables, mais de cette façon, je n'utiliserais pas correctement le mécanisme de liaison angularjs, ce ne serait que des montres et des gestionnaires d'événements ... ce qui me semble désordonné. Cela aurait été agréable si une façon dont j'avais un moyen de mettre des balises SVG dans la propriété de modèle de la directive et de la butée dans le gabarit, mais cela ne semble pas être pris en charge.

Est-ce que vous avez d'autres idées à ce sujet?

BTW est là un moyen d'appliquer des liaisons de manière programmative entre une propriété et un élément HTML (par exemple, la zone de texte) obtenue avec jQuery?

Cordialement

Était-ce utile?

La solution

Vous pouvez obtenir la maintien du contrôleur, mais cela rendrait toute la communication entre SVG et votre application à l'échelle.Au lieu de cela, inverser la manière dont l'application est composée: Laissez lancer l'application et enveloppez le SVG à l'aide d'une directive dans un composant réutilisable en tant que Dan mentionné.

BTW à l'aide de SVG et angulaire n'est pas une chose aussi rare.Découvrez cet exemple très génial: http://sullerandras.github.com/svg-equerence-diagram/

Autres conseils

Vous devriez examiner la création d'une directive Angularjs qui enveloppe ces objets.Lorsque des données liées aux changements d'étendue angulaire, vous devez faire une portée. $ Apply ().C'est une réponse simpliste, jetez un coup d'œil au http://docs.angularjs.org/guide/directive doc.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top