angularjs - uib - ui bootstrap tpls 2.5 0

¿Cómo creo un popover de arranque UI de AngularJS con contenido HTML?

Question

Quiero crear un popover bootstrap con una etiqueta previa que contenga un objeto JSON embellecido. La implementación ingenua,

<span popover=''<pre>{[ some_obj | json:"  " ]}</pre>''
      popover-trigger=''mouseenter''>

escapa el contenido antes de insertarlo en la ventana emergente. ¿Cuál es la mejor manera de especificar un cuerpo popover con contenido html?

Answer 1

Use la directiva popover-template

Si está utilizando una versión de u -ui angular igual o superior a 0.13.0 , su mejor opción es usar la directiva popover-template . Aquí es cómo usarlo:

<button popover-template="''popover.html''">My HTML popover</button>

<script type="text/ng-template" id="popover.html">
    <div>
        Popover content
    </div>
</script>

NB: No olvides las comillas alrededor del nombre de la plantilla en popover-template="''popover.html''" .

Ver demo plunker

Como nota al margen, es posible externalizar la plantilla de popover en un archivo html dedicado, en lugar de declararlo en un elemento <script type="text/ng-template> como se indicó anteriormente.

Ver segundo demo plunker

Answer 2

El siguiente estilo de CSS parece haber hecho lo que quería en mi caso específico:

.popover-content {
  white-space: pre;
  font-family: monospace;
}

La pregunta general aún permanece abierta.

Answer 3

Necesita modificar la plantilla predeterminada de popover para especificar que desea permitir el contenido Html. Mira el div popover-content , ahora tiene su enlace hecho a la propiedad de content permite html inseguro:

 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() }''>" + 
            "<div class=''arrow''></div><div class=''popover-inner''>" + 
            "<h3 class=''popover-title'' ng-bind=''title'' ng-show=''title''></h3>" + 
            "<div class=''popover-content'' ng-bind-html-unsafe=''content''></div>" +
            "<button class=''btn btn-cancel'' ng-click=''manualHide()''>Cancel</button>" +
            "<button class=''btn btn-apply'' ng-click=''manualHide()''>Apply</button></div></div>");
    }]);

Answer 4

Para todas sus necesidades convencionales de popover Bootstrap, puede utilizar la siguiente directiva angular. Elimina el desorden de la plantilla HTML y es muy fácil de usar.

Puede configurar el title , el content , la placement , el delay fundido de entrada / salida de popover, trigger evento trigger y si el contenido debe tratarse como html . También evita el desbordamiento y recorte de contenido.

Plunker relacionado con todos los códigos aquí http://plnkr.co/edit/MOqhJi

Tapa de la pantalla

Uso

<!-- HTML -->
<div ng-model="popup.content" popup="popup.options">Some element</div>

/* JavaScript */
this.popup = {
  content: ''Popup content here'',
  options: {
    title: null,
    placement: ''right'', 
    delay: { show: 800, hide: 100 }
  }
}; 

JavaScript

/**
 * Popup, a Bootstrap popover wrapper.
 *
 * Usage: 
 *  <div ng-model="model" popup="options"></div>
 * 
 * Remarks: 
 *  To prevent content overflow and clipping, use CSS
 *  .popover { word-wrap: break-word; }
 *  Popup without title and content will not be shown.
 *
 * @param {String}  ngModel           popup content
 * @param {Object}  options           popup options
 * @param {String}  options.title     title
 * @param {Boolean} options.html      content should be treated as html markup
 * @param {String}  options.placement placement (top, bottom, left or right)
 * @param {String}  options.trigger   trigger event, default is hover
 * @param {Object}  options.delay     milliseconds or { show:<ms>, hide:<ms> }
 */
app.directive(''popup'', function() {
  return {
    restrict: ''A'',
    require: ''ngModel'',
    scope: {
      ngModel: ''='',
      options: ''=popup''
    },
    link: function(scope, element) {
      scope.$watch(''ngModel'', function(val) {
        element.attr(''data-content'', val);
      });

      var options = scope.options || {} ; 

      var title = options.title || null;
      var placement = options.placement || ''right'';
      var html = options.html || false;
      var delay = options.delay ? angular.toJson(options.delay) : null;
      var trigger = options.trigger || ''hover'';

      element.attr(''title'', title);
      element.attr(''data-placement'', placement);
      element.attr(''data-html'', html);
      element.attr(''data-delay'', delay);
      element.popover({ trigger: trigger });
    }
  };
});

Answer 5

Publiqué una solución en el proyecto github: https://github.com/angular-ui/bootstrap/issues/520

Si desea agregar esta funcionalidad a su proyecto, aquí hay un parche.

Agregue esas directivas:

angular.module("XXX")
    .directive("popoverHtmlUnsafePopup", function () {
      return {
        restrict: "EA",
        replace: true,
        scope: { title: "@", content: "@", placement: "@", animation: "&", isOpen: "&" },
        templateUrl: "template/popover/popover-html-unsafe-popup.html"
      };
    })

    .directive("popoverHtmlUnsafe", [ "$tooltip", function ($tooltip) {
      return $tooltip("popoverHtmlUnsafe", "popover", "click");
    }]);

Y agrega la plantilla:

<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
  <div class="arrow"></div>

  <div class="popover-inner">
      <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
      <div class="popover-content" bind-html-unsafe="content"></div>
  </div>
</div>

Uso: <button popover-placement="top" popover-html-unsafe="On the <b>Top!</b>" class="btn btn-default">Top</button>

Véalo en plunkr: http://plnkr.co/edit/VhYAD04ETQsJ2dY3Uum3?p=preview

Answer 6

Ver https://github.com/jbruni/bootstrap-bower-jbruni , que permite usar una plantilla popover

Answer 7

ACTUALIZAR :

Como se puede ver en this , ahora debería poder hacer esto sin anular la plantilla predeterminada.

ORIGINAL:

A partir de angular 1.2+ ng-bind-html-unsafe ha sido eliminado. deberías estar usando el servicio $sce . Reference .

Aquí hay un filtro para crear html de confianza.

MyApp.filter(''unsafe'', [''$sce'', function ($sce) {
    return function (val) {
        return $sce.trustAsHtml(val);
    };
}]);

Aquí está la plantilla sobrescrita de Angular Bootstrap 0.11.2 haciendo uso de este filtro

// update popover template for binding unsafe html
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" +
      "      <h3 class=/"popover-title/" ng-bind-html=/"title | unsafe/" ng-show=/"title/"></h3>/n" +
      "      <div class=/"popover-content/"ng-bind-html=/"content | unsafe/"></div>/n" +
      "  </div>/n" +
      "</div>/n" +
      "");
}]);

EDITAR: Aquí hay una implementación de Plunker .

EDIT 2: Como esta respuesta sigue recibiendo visitas, la mantendré actualizada lo mejor que pueda. Como referencia Here está la plantilla del repositorio bootstrap angular-ui. Si esto cambia, la plantilla de reemplazo requerirá que coincidan las actualizaciones y la adición de los atributos ng-bind-html=/"title | unsafe/" y ng-bind-html=/"content | unsafe/" para continuar trabajando.

Para una conversación actualizada revisa el problema aquí .