AngularJS SVGウィジェットでデータをバインドする方法

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

質問

これは通常Angularjsを使う方法ではないことを知っていますが、私が達成したいのかangularjsで行われたいのか疑問に思いました。これが推奨される方法ではない場合は、これを達成する方法についてヒントを提供してください。 Webプログラミングエリアでは新しいことを考えてください。

SO PROJECTでは、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）の間でプログラムでバインディングを適用する方法がありますか？

wares

役に立ちましたか？

解決

コントローラを保持することができますが、それはSVGとあなたのアプリ間の通信全体を側面にします。代わりにアプリケーションがどのように構成されているかを反転させます.Appular Drive Appを駆動し、DANが言及されているようにディレクティブを再使用可能なコンポーネントに使用してSVGをラップします。

SVGと角度を用いたBTWはそのようなまれなものではありません。このかなり素晴らしい例：> http://sullerandras.github.com/svg-sequence-diagram/

他のヒント

これらのオブジェクトを折り返すangularjsディレクティブの作成を見るべきです。角度範囲にバインドされているデータが変更された場合は、範囲を実行する必要があります。$ apply（）。これは単純な答えです、 http://docs.angularjs.org/guide/dilective doc。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top