2017-08-07 8 views
0

角度ストラップPopover libのonBeforeShow()イベントを使用してCSS(left)スタイルを適用することについて教えてください。角ストラップのonBeforeShow()を使用してPopoverにCSSスタイルを適用する方法

基本的には、コーナーだけでなく、要素の中央(少なくとも近く)に表示するために、ポップオーバーの左の位置を50〜100ピクセルだけ縮小したいと考えています。 http://plnkr.co/edit/62BDv7JwluOl3eqtXPCZ?p=preview

私たちの助けに感謝 -

は、あなたはそれがこの例やフォークを使用することができます。

+0

理由だけで、CSSを使用していない:あなたはポップオーバーを処理するためのすべてのこれらのイベントの使用をすることができますか? – baklazan

+0

@baklazan、私はそれを動的に異なるポップオーバーに適用し、ターゲット要素のサイズに基づいて配置できるようにします。 –

答えて

0

アングルストラップポップオーバー内部にツールチップモジュールを使用します。 popoverの指示を作成して$ popoverサービスを使用している場合は、ツールチップのイベントを処理する必要があります。

$scope.$on('tooltip.show.before', function(){ 
    alert('The popover onBeforeShow state'); 
    //$('.popover').css('left','100px') 
}); 

しかし、まだあなたがその設定を変更することで、スタイルを変更したい場合は、それが正しいのです(コントローラからそのスタイルを変更するのはできないDOM上で作成されていない、このイベントのポップオーバー要素に思える:だから、何が必要ですイベント)。しかし、tooltip.showイベントは、(コントローラ機能から)必要なものを実行します。このイベントでは、popover要素のcssを変更する機能を持つことができます。

Plunker例:https://plnkr.co/edit/eSzNE95yBjegzYSTdFRE?p=preview

(トランジションがきれいではないかもしれないが、あなたは少し遅いアニメーションとそれを処理することができます。)

P.S. tooltip.show.beforetooltip.showtooltip.hide.beforetooltip.hide

関連する問題