16

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

ポップオーバー テンプレートをカスタマイズして、閉じるボタンを含めました。しかし、ポップオーバーを閉じる関数/イベントがまだ見つかりません。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" +
    "");
}]);

「POPOVER WITH CLOSE」ボタンの「クリック」イベントをトリガーする閉じるボタンのディレクティブを作成することを考えましたが、それが従うべきアプローチであるかどうかはわかりません。

従うべき正しいアプローチは何ですか？

4

2 に答える 2

1

適切な解決策は、属性を介してポップオーバー テンプレートを指定し、uib-popover-templateテンプレートの閉じるボタンのng-clickハンドラーをポップオーバーのpopover-is-openプロパティにバインドすることです。このプロパティを追加して、提供されたトリガー オプションをユーザーが「無視」できるようにしました (popover-trigger="none"ポップオーバーをいつ表示および非表示にするかを指定して、ユーザーが完全に制御できるようにすることによって)。

更新されたドキュメント (および例)は、こちら でご覧いただけます。

于 2016-04-27T14:54:44.290 に答える