Использование Angular внутри загрузочного поповера

Question

Я пытаюсь создать таблицу во всплывающем окне Bootstrap, в котором есть 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
       });
    }
  }
})

и в вашем поповере 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 - это встроенные директивы начальной загрузки. Так что в основном это будет выглядеть так:

---

HTML для вызова / активации 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>

---

всплывающий шаблон

    <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%, и не нужно слишком много усилий, чтобы заполнить пробелы, посмотрев документацию на угловой ремень. У них отличные документы. Проект strap также имеет отличные реализации для большинства остальных компонентов boostrap 3.

Plukr, используя приведенный выше код для демоверсии popover

Как я уже говорил, код там на 99%, но чтобы пройти лишнюю милю, я сделал демонстрационную демонстрацию, чтобы показать, как именно это делается.