在 angular bootstrap 中将弹出窗口模板的模板放在哪里？

Question

创建一个 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>

我在

的视图中使用它

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 视图相同的目录中 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 包含您要显示的实际文本。我认为这会起作用（您可以在问题中链接的同一页面上找到示例）。

看起来像这样：

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.

时很多

Answer 2

如果你真的想处理外部模板，你可以在另一个 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);
      }
    };
  });

这是一个 plunker，这可能有助于更好地理解它。

Answer 3

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>'
    };
  });

在 angular bootstrap 中将弹出窗口模板的模板放在哪里？

Where to put the template for a popover-template in angular bootstrap?

javascript

twitter-bootstrap

angularjs

angular-ui