在引导弹出窗口中使用 Angular [英] Using Angular inside of a bootstrap popover

问题描述

我正在尝试在 Bootstrap popover 中创建一个表格，该表格具有 ng-repeat 来制作行，但似乎 angular 失败了，我不知道为什么.

I'm trying to create a table inside a Bootstrap popover that has an ng-repeat to make the rows but it seems like the angular is failing and I'm not sure why.

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'
];

结果是popover body有一行是空的.任何帮助表示赞赏.谢谢！

The result is that the popover body has one row that is empty. Any help is appreciated. Thank you!

推荐答案

看起来你想要实现的可能在 angular 版本中还不支持，你可以创建一个自己的指令并做这样的事情；-

Seems like probably what you are trying to achieve is not yet supported in angular version, you can instead create a directive of your own and do something like this;-

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

and in your popover html add the directive attribute 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>

演示

使其更具可配置性，通过设置，演示:-

Making it bit more configurable, pass the settings, Demo:-

这篇关于在引导弹出窗口中使用 Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！