9

これは通常AngularJSを使用する方法ではないことを私は知っていますが、私が達成したいことはAngularJSで実行可能かどうか疑問に思いました。これが推奨される方法ではない場合、これを達成するためのヒントを教えてください。私はWebプログラミングの分野で新しいことを考慮してください。

そのため、私のプロジェクトでは、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バインディングメカニズムを適切に使用せず、ウォッチとイベントハンドラーだけになります...これは私には面倒に思えます。何らかの方法でディレクティブのtemplateプロパティにSVGタグを配置し、テンプレートで入札を行うことができればよかったのですが、それはサポートされていないようです。

これについて他のアイデアはありますか？

ところで、プロパティとjQueryで取得したHTML要素（テキストボックスなど）の間にプログラムでバインディングを適用する方法はありますか？

よろしく

4

2 に答える 2

14

コントローラーを手に入れることはできますが、それでは SVG とアプリの間の通信全体が裏返しになってしまいます。代わりに、アプリケーションの構成方法を逆にします。Dan が述べたように、Angular でアプリを駆動し、ディレクティブを使用して svg を再利用可能なコンポーネントにラップします。

ところで、SVG と angular を使用することはそれほど珍しいことではありません。この非常に素晴らしい例をチェックしてください: http://sullerandras.github.com/SVG-Sequence-Diagram/

于 2012-05-23T04:48:52.987 に答える
2

これらのオブジェクトをラップする angularjs ディレクティブの作成を検討する必要があります。angular スコープにバインドされたデータが変更された場合は、scope.$apply() を実行する必要があります。これは単純な回答です。http://docs.angularjs.org/guide/directive doc をご覧ください。

于 2012-05-23T00:05:17.843 に答える