popover - close - Ventana emergente de Bootstrap de UI angular con botón de cierre

popover css

Question

Estoy utilizando Angular UI Bootstrap para crear una ventana emergente, pero no puedo encontrar la opción de agregar un botón de cierre dentro de la ventana emergente.

Personalicé la plantilla emergente para incluir el botón de cerrar. Pero todavía no puedo encontrar una función / evento para cerrar la ventana emergente. Establecer isOpen to false funciona por primera vez, ya que solo sobrescribe la función, pero a partir de ese momento se vuelve inutilizable.

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

Aquí está la secuencia de comandos de la plantilla:

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

Pensé en escribir una directiva para el botón de cierre para activar el "clic" del botón "POPOVER WITH CLOSE". Pero no estoy seguro de si ese es el enfoque a seguir.

¿Cuál es el enfoque correcto a seguir?

Answer 1

Cambié la información sobre herramientas y el código emergente.

Así es como se ve plunker

Aquí está la solicitud de extracción para esto.

Answer 2

La solución correcta ahora es especificar una plantilla emergente a través del atributo uib-popover-template y vincular el controlador ng-click su plantilla a la propiedad popover-is-open de popover-is-open . Agregamos esta propiedad para permitir que el usuario "ignore" las opciones de activación provistas (especificando popover-trigger="none" y otorgue al usuario un control total sobre cuándo mostrar y ocultar la ventana emergente.

Puede ver los documentos actualizados (y ejemplos) here .