Angular UT Bootstrap popover с кнопкой закрытия - программирование
Подтвердить что ты не робот

Angular UT Bootstrap popover с кнопкой закрытия

Я использую Angular UI Bootstrap для создания popover, но я не могу найти возможность добавить кнопку закрытия внутри popover.

Я настроил шаблон popover, чтобы включить кнопку закрытия. Но я все еще не могу найти функцию/событие, чтобы закрыть popover. Настройка isOpen на false работает в первый раз, поскольку она просто перезаписывает функцию, но после этого становится непригодной.

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

Вот шаблон script:

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" +
    "");
}]);

Я подумал о написании директивы для кнопки "закрыть", чтобы вызвать событие "щелчок" кнопки "ПОПОВЕРЬ С ЗАКРЫТО". Но я не уверен, подходит ли этот подход.

Каков правильный подход?

4b9b3361

Ответ 1

Правильное решение теперь состоит в том, чтобы указать шаблон popover с помощью атрибута uib-popover-template и привязать обработчик шаблона закрытия ng-click к свойству popover popover-is-open. Мы добавили это свойство, чтобы позволить пользователю "игнорировать" предоставленные параметры запуска (указав popover-trigger="none" и дать пользователю полный контроль, когда показывать и скрывать popover.

Вы можете увидеть обновленные документы (и примеры) здесь.

Ответ 2

Я изменил подсказку и код popover.

Вот как это выглядит как plunker

Вот тянуть запрос для этого.