AngularJS Come vincolare i dati con il widget SVG

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

Domanda

So che questo di solito non è il modo di usare Angularjs, ma mi stavo chiedendo se quello che voglio raggiungere è fattibile con AngularJS. Se questo non è il modo consigliato potresti fornire suggerimenti su come ottenere questo? Si prega di considerare che sono nuovo nell'area di programmazione del web.

Quindi nel mio progetto sorgono utilizzando SVG e Raphaeljs diversi widget su una tela che si trova nel "supporto" div. Sto cercando di vincolare questi widget ai dati utilizzando AngularJS, in pratica ogni widget è collegato a un oggetto nel customController. Come posso accedere al cognomeController quando inizializza i miei widget? 

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

Questo è comunque questo per raggiungere il legame dei dati sui widget SVG utilizzando AngularJS? Sto iniziando a pensare che questo non è lo scopo di Angularjs..in questo caso potresti avvisarmi su come farlo?

Aggiornamento:

Guys Grazie mille per le tue risposte! Il requisito è che il widget accetta l'ingresso dell'utente e voglio che non venga inserito nel file HTML (a scopo di modularità). Quindi la direttiva sembra essere la scelta principale per ora. Nel metodo di collegamento disegnerei il widget usando Raphaeljs e posso anche disegnare gli oggetti modificabili ma in questo modo non utilizzerei correttamente il meccanismo di legame angolare, sarebbe solo orologi e gestori di eventi ... che sembra disordinato per me. Sarebbe stato bello se qualche modo avrei potuto mettere i tag svg nella proprietà del modello della direttiva e fare il biding nel modello, ma ciò non sembra essere supportato.

voi ragazzi avete altre idee su questo?

BTW è presente un modo per applicare i binding in modo programmatico tra una proprietà e un elemento HTML (ad esempio TextBox) ottenuto con JQuery?

Saluti

È stato utile?

Soluzione

È possibile contenere il controller, ma ciò renderebbe l'intera comunicazione tra SVG e la tua app in-side-out.Invece invertire il modo in cui l'applicazione è composta: lascia che l'ANGURAL drive l'app e avvolgere l'SVG utilizzando una direttiva in un componente riutilizzabile come Dan menzionato.

btw usando svg e angolare non è una cosa così rara.Dai un'occhiata a questo fantastico esempio: http://sullerandras.github.com/svg-sequience-diagram/

Altri suggerimenti

Dovresti cercare di creare una direttiva angolari che avvolge questi oggetti.Quando i dati vincolati alle variazioni dell'ambito angolare, è necessario eseguire una portata. $ Applica ().Questa è una risposta semplicistica, dai un'occhiata al http://docs.angularjs.org/guide/directive doc.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top