javascript - popover bootstrap ejemplo

Usando Angular dentro de un popover bootstrap

Question

Intento crear una tabla dentro de un popover Bootstrap que tenga una repetición ng para hacer las filas, pero parece que el ángulo está fallando y no estoy seguro de por qué.

HTML:

<a  id="showDays"
    type="button"
    class="btn btn-success btn-xs pull-right"
    data-toggle="popover"
    data-placement="left"
    data-html="true"
    title="Popover title"
    data-content=
    ''<table class="table table-condensed">
       <tbody>
         <tr ng-repeat="d in days">
           <td>{{d}}</td>
         </tr>
       </tbody>
     </table>''>
      <i class="fa fa-clock-o fa-lg"></i>
</a>
<script type="text/javascript" >
  $(''#showDays'').popover();
</script>

Controlador:

$scope.days = [
  ''Sunday'',
  ''Monday'',
  ''Tuesday'',
  ''Wednesday'',
  ''Thursday'',
  ''Friday'',
  ''Saturday''
];

El resultado es que el cuerpo de popover tiene una fila que está vacía. Cualquier ayuda es apreciada. ¡Gracias!

Answer 1

Parece que probablemente lo que está tratando de lograr aún no se admite en la versión angular, en su lugar puede crear una directiva propia y hacer algo como esto;

.directive(''popover'', function($compile, $timeout){
  return {
    restrict: ''A'',
    link:function(scope, el, attrs){
      var content = attrs.content; //get the template from the attribute
      var elm = angular.element(''<div />''); //create a temporary element
      elm.append(attrs.content); //append the content
      $compile(elm)(scope); //compile 
      $timeout(function() { //Once That is rendered
        el.removeAttr(''popover'').attr(''data-content'',elm.html()); //Update the attribute
        el.popover(); //set up popover
       });
    }
  }
})

y en tu popover html agrega el popover atributo de directiva: -

 <a popover  id="showDays"
    type="button"
    class="btn btn-success btn-xs pull-left"
    data-toggle="popover"
    data-placement="right"
    data-html="true"
    title="Popover title"
    data-content=
    ''<table class="table table-condensed">
       <tbody>
         <tr ng-repeat="d in days">
           <td ng-bind="d"></td>
         </tr>
       </tbody>
     </table>''>
      <i class="fa fa-clock-o fa-lg">Click me</i>
  </a>

Manifestación

Haciéndolo un poco más configurable, pase la configuración, demostración : -

Answer 2

Puede hacer que esto funcione de la caja usando popovers de correa angular.

Proyecto de correa angular

Angular Strap es directivas de bootstrap nativas hechas a la derecha. Así que, básicamente, se vería así:

HTML para llamar / activar popover

<a  id="showDays"
type="button"
class="btn btn-success btn-xs pull-right"
data-trigger="hover" //i wasn''t sure what trigger you wanted
ng-model="days"
data-placement="left"
data-html="true"
title="Popover title" //optional
data-template="file-path/to-local-HTML-template.html"
bs-popover>
</a>

pop-over plantilla

    <div class="popover" tabindex="-1">
    <div class="arrow"></div>
    <h3 class="popover-title" ng-bind-html="title">Your Title</h3>
    <div class="popover-content">
       <table class="table table-condensed">
           <tbody>
               <tr ng-repeat="d in days">
                   <td ng-bind="d"></td>
               </tr>
           </tbody>
       </table>''>
  <i class="fa fa-clock-o fa-lg">Click me</i>
    </div>
</div>

Si eso no funciona, debería estar al 99.9% allí y no debería tomarse demasiado esfuerzo llenar los huecos mirando la documentación de la correa angular. Tienen excelentes documentos. El proyecto de correa también tiene grandes implementaciones para la mayoría del resto de los componentes de boostrap 3.

Plukr usando el código de arriba para demo de popover

Como dije, el código allí arriba es como 99%, pero solo para hacer un esfuerzo adicional hice una demostración de plunk para mostrar exactamente cómo se hace.