Come faccio a creare una UI, AngularJS bootstrap popover con contenuto HTML?

Voglio creare un bootstrap popover con un pre tag contenente una abbellita oggetto JSON. L’ingenuo attuazione,

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

sfugge il contenuto prima di inserire il popup. Qual è il miglior modo per specificare un popover corpo con contenuto html?

  • Il mio angolare popover direttiva ispettore gadget consente di utilizzare l’HTML in un popover contenuto un po ‘ più direttamente. Potrebbe essere una soluzione migliore, se non ti dispiace la dipendenza.
  • Fedorov, si dovrebbe accettare Matteo.Lothian risposta al posto di quello attuale.
  • Fatto. Grazie!

 

7 Replies
  1. 71

    AGGIORNAMENTO:

    Come si è visto in questo, si dovrebbe ora essere in grado di fare questo senza l’override del template di default.

    ORIGINALE:

    Come angolare 1.2+ ng-bind-html-unsafe è stato rimosso. si dovrebbe essere utilizzando il $sce servizio. Riferimento.

    Qui è un filtro per la creazione di fiducia html.

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

    Qui è la sovrascritto Angolare di Bootstrap 0.11.2 modello facendo uso di questo 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" +
          "");
    }]);

    EDIT: Qui è un Plunker attuazione.

    EDIT 2: Come questa risposta continua a ottenere successi, cercherò di tenerlo aggiornato come meglio posso. Come riferimento Qui è il modello dal angolare-ui bootstrap repo. Se questo cambia, l’override template richiedono una combinazione di aggiornamenti e l’aggiunta di ng-bind-html=\"title | unsafe\" e ng-bind-html=\"content | unsafe\" attributi per continuare a lavorare.

    Per aggiornamento conversazione verificare il il problema qui.

    • dove devo inserire questo codice?
    • Il filtro deve essere aggiunto un modulo o i moduli utilizzati dai principali modulo app. Il template override dovrebbe essere incluso dopo Angolare e Bootstrap UI, quindi non è ridefinito da bootstrap. Aggiungo un esempio per rendere più facile vederlo lavorare.
    • Fedorov come questo ha come molti upvotes attuale (ora corretto) risposta, potrebbe aiutare i futuri spettatori impostazione di cui sopra per la marcata risposta?
    • Funziona perfettamente. Non capisco perché questa non è una parte di codice ufficiale angolare-ui.github.io/bootstrap/#/popover
  2. 24

    Utilizzare il popover-modello direttiva

    Se si utilizza una versione di angolare-ui uguale o superiore a 0.13.0, l’opzione migliore è di utilizzare il popover-template direttiva. Ecco come usarlo:

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

    NB: non dimenticate le virgolette il nome del modello in popover-template="'popover.html'".

    Vedere demo plunker


    Come nota a margine, è possibile esternare il popover modello in un apposito file html, invece di dichiarare in un <script type="text/ng-template> elemento come sopra.

    Vedere secondo demo plunker

    • Più uno per il NB. Mi ha ricordato quello che mi mancava.
    • scusa per il commento 2 anni dopo, ma ricevo un angularjs errore : Modello per la direttiva ‘mainmenu’ deve avere esattamente un elemento principale. templates/components/shared/menu/mainmenu/menu.view.html cosa devo cambiare?
  3. 9

    Ho inviato una soluzione su github del progetto: https://github.com/angular-ui/bootstrap/issues/520

    Mi volete aggiungere questa funzionalità al progetto, qui è una patch.

    Aggiungere tali direttive:

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

    E aggiungere il template:

    <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>

    Vista sul plunkr: http://plnkr.co/edit/VhYAD04ETQsJ2dY3Uum3?p=preview

    • Dal momento che il modello utilizzato è definito direttamente nella direttiva,c’è un modo siamo in grado di scegliere il modello direttamente da HTML ? Dal momento che abbiamo bisogno di un modello diverso in tempi diversi.
  4. 6

    È necessario modificare l’impostazione predefinita popover modello per specificare che si desidera consentire il contenuto Html.
    Guardare il popover-content div, ora ha la sua associazione di fatto per il content proprietà permettendo pericoloso 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() }'>" + 
                "<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>");
        }]);
    • Questo non è più corretto, in quanto angolare 1.2+ come ng-bind-html-unsafe è stato rimosso.
    • Vedere la risposta corretta per Angolare UI 1.2, qui di seguito. stackoverflow.com/a/21979258/48082
  5. 6

    Per tutti i tuoi convenzionale Bootstrap popover esigenze che si potrebbero utilizzare le seguenti angolare direttiva. Rimuove il disordine e il template HTML e è molto facile da usare.

    È possibile configurare popover del title, content, placement, fade in/out delay, trigger evento e se il contenuto deve essere trattato come html. Previene anche il contenuto di overflow & ritaglio.

    Relative plunker con tutte le codici qui http://plnkr.co/edit/MOqhJi

    Screencap

    Come faccio a creare una UI, AngularJS bootstrap popover con contenuto HTML?

    Utilizzo

    <!-- 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 });
        }
      };
    });
    • Questo non è usare angolare UI bootstrap come OP ha chiesto, e invece si basa su jQuery e bootstrap.js non sono sicuro di come convenzionale, che è. Altri saggi buona risposta.
  6. 1

    Il seguente CSS styling sembra aver fatto ciò che ho voluto nel mio caso specifico:

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

    Generale questione rimane ancora aperta.

Lascia un commento