Question

我试图在Bootstrap popover中创建一个表格，该表格有一个ng-repeat来制作行，但似乎角度失败了，我不确定原因。

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>

控制器：

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

结果是弹出框体有一行是空的。任何帮助表示赞赏。谢谢！

Answer 1

似乎可能你想要实现的目标在角度版本中尚不支持，你可以改为创建自己的指令并做这样的事情; -

.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
       });
    }
  }
})

并在你的popover html中添加指令属性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

使其更具可配置性，通过设置 Demo ： -

Answer 2

你可以使用棱角带弹出装置开箱即用。

Angular Strap Project

Angular Strap是正确的本机引导指令。所以基本上它看起来像这样：

用于调用/激活popover的HTML

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

弹出模板

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

如果那不起作用，它应该是99.9％，并且不应该花费太多精力来填补空隙，通过查看角带的文档。他们有很棒的文档。对于大部分其他的boostrap 3组件，表带项目也有很好的实现。

Plukr using the above code for popover demo

就像我说那里的代码有99％那样，但只是为了更加努力，我做了一个插件演示，以确切地说明它是如何完成的。

在引导程序弹出窗口中使用Angular

2 个答案:

用于调用/激活popover的HTML

弹出模板