Estoy tratando de crear una tabla dentro de un popover Bootstrap que tiene una repetición ng para hacer las filas, pero parece que el angular 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!

4
Elementary 4 sep. 2014 a las 04:40

2 respuestas

La mejor respuesta

Parece que probablemente lo que está tratando de lograr aún no es compatible con 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 su popover html agregue el atributo de directiva popover: -

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

Demo

Para hacerlo más configurable, pase la configuración, Demo : -

4
PSL 4 sep. 2014 a las 03:28

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

Proyecto de correa angular

Angular Strap son directivas de bootstrap nativas hechas correctamente. 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>

Plantilla emergente

    <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 allí al 99.9% y no debería tomar demasiado esfuerzo llenar los espacios mirando la documentación de la correa angular. Tienen excelentes documentos. El proyecto de correa también tiene excelentes implementaciones para la mayoría del resto de los componentes boostrap 3.

Plukr usando el código anterior para la demostración de popover

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

3
Community 20 jun. 2020 a las 09:12