HTML コードからのデータを使用して角度コントローラーを接続する方法は?
コンポーネントを相互に接続してアプリケーションを構築できるサーバー側フレームワークがあります。これらのコンポーネントの一部は、わずかな HTML マークアップに変換されます。他のコンポーネントは、最初の種類のコンポーネントのデータのみを提供します。この部分の技術的な詳細は重要ではありません。
例: サーバーには VideoPlayer と PlayButton の 2 つのコンポーネントがあります。PlayButton は VideoPlayer に接続されています。ページがレンダリングされると、 VideoPlayer は になり<div id="the_player" class="flowplayer">...</div>
、 PlayButton は になり<button data-player-id="the_player">...</button>
ます。そのため、ボタンのオンクリック ハンドラーはdata-player-id
、プレーヤーを検索して再生させるために使用できます。VideoPlayer ID ( the_player
) は、サーバー上の接続を使用してコンポーネント間で渡されるため、2 つのプレーヤーと複数のボタンを使用して、各ボタンが指定されたプレーヤーのみを制御することができます。これらの接続は JavaScript コードで指定されていないため、コンポーネントの接続を変更しても JavaScript コードにはまったく影響しないことに注意してください。
質問: Angular コントローラーを使用してそのようなことを行うにはどうすればよいですか? Angular DI は単純すぎて、サービスの種類ごとに 1 つのインスタンスしか想定していません。コントローラーと HTML DOM 間の双方向バインディングが気に入っています。これにより、ウィジェットが非常にシンプルになります。しかし、そのようなウィジェットを HTML 属性でアドレス指定されたデータ ソースに接続するにはどうすればよいでしょうか?