Куда поместить шаблон для popover-шаблона в angular bootstrap?

popover-template должен быть переменной. Это работает:

app / views / c2g.html

<div class="checkbox">
  <label>
    <input type="checkbox"
           ng-model="rental.airport">
    <span tariff-popover="views/pop.html">
      Flughafenpauschale
    </span>
    <br/>
  </label>
</div>

приложение / скрипты / директивы / popover.js

angular.module('c2gyoApp')
  .directive('tariffPopover', function () {
    return {
      restrict: 'A',
      transclude: true,
      scope: {
        text: '@tariffPopover'
      },
      template:
        '<span ng-transclude></span>' +
        '&nbsp;' +
        '<span popover-placement="right" ' +
        '      popover-template="text" ' +
        '      popover-trigger="mouseenter" ' +
        '      class="fa fa-info-circle">' +
        '</span>'
    };
  });

Если вы действительно хотите иметь дело с внешним шаблоном, вы можете определить его в другом HTML-файле (который используется другим представлением), как показано ниже.

<script type="text/ng-template" id="pop.html">
   <h1>Hi</h1>
</script>

Это может быть вызвано и встроено в директиву по желанию.

Я предпочитаю обновить директиву, как показано ниже.

    angular.module('c2gyoApp')
      .directive('tariffPopover', function () {
        var getTemplate = function () {
            var template = '';
                template = $templateCache.get("pop.html");
            }
            return template;
        };

    return {
      restrict: 'A',
      transclude: true,
      scope: {
        text: '@tariffPopover'
      },
      link: function(scope, element, attrs) {
            var popOverContent = getTemplate();
            popOverContent = $compile("<div>" + popOverContent+"</div>")(scope);

            var options = {
                //title       : title,
                content     : popOverContent,
                placement   : "right",
                html        : true,
                date        : scope.date,
                trigger     : "hover"
            };
            $(element).popover(options);
      }
    };
  });

Это плункер, который может помочь лучше понять это.

Есть атрибут popover, который принимает фактический текст, который вы хотите отобразить. Я думаю, что это сработает (вы можете найти пример на той же странице, на которую вы указали в своем вопросе).

Это выглядело бы примерно так:

angular.module('c2gyoApp')
  .directive('tariffPopover', function () {
    return {
      restrict: 'A',
      transclude: true,
      scope: {
        text: '@tariffPopover'
      },
      template:
        '<span ng-transclude></span>' +
        '&nbsp;' +
        '<span popover-placement="right" ' +
        '      popover="<h1>Hi</h1>" ' +
        '      popover-trigger="mouseenter" ' +
        '      class="fa fa-info-circle">' +
        '</span>'
    };
  });

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