在引導程序彈出窗口中使用Angular

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>

演示

使其更具可配置性，通過設置， 演示 ： -

Answer 2

你可以使用棱角帶彈出裝置開箱即用。

角帶項目

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使用上面的代碼進行popover演示

就像我說那里的代碼有99％那樣，但只是為了更加努力，我做了一個plunk演示，以確切地說明它是如何完成的。