javascript - 在 Angular Bootstrap 中将 popover 模板的模板放在哪里？

Question

我想用 angular-bootstrap popover-template 创建一个 html 弹出窗口

指令本身在路径中:

app/scripts/directives/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="pop.html" ' +
        '      popover-trigger="mouseenter" ' +
        '      class="fa fa-info-circle">' +
        '</span>'
    };
  });

pop.html 是一个简单的 html 文件:

<h1>Hi</h1>

我在 View 中使用它

app/views/c2g.html

<div class="checkbox">
  <label>
    <input type="checkbox"
           ng-model="rental.airport">
    <span tariff-popover="{{info.airport}}">
      Flughafenpauschale
    </span>
    <br/>
  </label>
</div>

我不知道我必须把 pop.html 模板放在哪里。我尝试了以下路径:

• 在应用程序的基本目录 app/pop.html
• 在与 popover.js 指令相同的目录 app/scripts/pop.html
• 在与 c2g.html View 相同的目录 app/views/pop.html

我还尝试将弹出窗口模板路径设置为 app/pop.html、app/scripts/pop.html 和 app/views/pop.html。但是 Popover 不会弹出。 html 模板的正确路径是什么？

@Aviro 将 pop.html 的内容更改为

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

没有帮助。

Answer 1

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>

app/scripts/directives/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>'
    };
  });