3

私たちは Angular.js でプロジェクトを行っており、UX 担当者から入手したモックアップでは、インタラクティブなポップオーバー / コールアウトを多用しています。

UI ポップオーバー - ダイアログの例

問題は、これらを角度のある概念にきれいにマッピングできないように見えることです。概念的には、独自のテンプレート、コントローラーが必要であり、ページ全体で作成および破棄する必要があります。レイアウトを変更せずに要素を重ねる。

ブートストラップ モーダルは、受け入れ可能な代替手段とは見なされません。創設者は、ページ上の特定の要素を指すインタラクティブなダイアログを作成することに非常に熱心です。

これを達成できるものはありますか？または、何かヒントはありますか？

4

3 に答える 3

1

他の要素のフォーカス、ぼかし、またはマウスオーバーで表示できるディレクティブまたは一連のディレクティブを実装します。実装によっては、onFocus または onBLur を開くディレクティブを 1 つだけ使用できる場合があります。Angular 1.2 は ng-focus、ng-mouseover、および ng-blur をサポートしており、これらを活用してこのようなことを行うことができます。

<div class="check-thing">
   <button class="checkmark" ng-mouseenter="showModal = true" ng-mouseleave="showModal = false"></button>
   <modal ng-show="showModal" model="modal-model"></modal>
</div>

次に、ディレクティブのフォームに双方向バインドされたモーダルモデルを設定するか、コントローラーが待機するユーザーがOKをクリックしたときにコールバックを起動します。チェッカー全体をディレクティブにして、それらを繰り返し使用する方が良いかもしれません。

注意してください、これはタブレットや電話ではホバーを簡単にサポートしていないため、あまりフレンドリーではありません.

于 2013-09-18T20:35:59.270 に答える