2013-06-18 6 views
16

Angular UI Bootstrapを使用してポップオーバーを作成していますが、ポップオーバーの中に閉じるボタンを追加するオプションが見つかりません。閉じるUIボタンストラップポップオーバー

クローズボタンを含むようにポップオーバーテンプレートをカスタマイズしました。しかし、私はまだポップオーバーを閉じるための機能/イベントを見つけることができません。 isOpenをfalseに設定すると、関数を上書きするだけで動作しますが、その後は使用できなくなります。ここで

<button popover-placement="bottom" popover="test">POPOVER WITH CLOSE<button> 

は、テンプレートスクリプトです:

angular.module("template/popover/popover.html", []).run(["$templateCache", function($templateCache) { 
    $templateCache.put("template/popover/popover.html", 
    "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" + 
    " <div class=\"arrow\"></div>\n" + 
    "\n" + 
    " <div class=\"popover-inner\">\n" + 
    "  <button ng-click=\"isOpen = !isOpen()\" class=\"btn-popover-close btn btn-primary\">Close</button>\n" + 
    "  <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" + 
    "  <div class=\"popover-content\" ng-bind=\"content\"></div>\n" + 
    " </div>\n" + 
    "</div>\n" + 
    ""); 
}]); 

私はCLOSE 『ボタンでポップオーバー「をクリックしてください」のイベントを』トリガする閉じるボタン用のディレクティブを書くことを考えた。しかし、私は、もしわかりません。それは従うべきアプローチです。私はツールチップとポップオーバーのコードを変更し

+0

クローズボタンを実装していないとはまだ信じられません。 – UltraSonja

答えて

0

従うべき正しいアプローチは何

?。

これはどのように見えるかplunker

ここにはpull requestがあります。

+1

残念ながら動作していません。修正する計画はありますか? – TimoSolo

1

右ソリューションは、uib-popover-template属性を使用してポップオーバーテンプレートを指定し、テンプレートの閉じるボタンのng-clickハンドラーをポップオーバーのpopover-is-openプロパティにバインドすることです。このプロパティを追加すると、指定されたトリガオプションを無視することができます(popover-trigger="none"を指定し、ユーザーにポップオーバーの表示と非表示を完全に制御できるようにします)。

here

関連する問題