angular-ui: 使用 popover-template

Question

我之前发布了一个问题：angular-ui-bootstrap: Implementing html in popover using popover-html 有人建议我使用 popover-template。

<i popover-template="popover-partial.html" popover-title="In Progress" class="glyphicon glyphicon-info-sign"></i>

<script type="text/ng-template" id="popover-partial.html">
    <b>Jody</b>
</script>

所以我正在尝试这样做，但现在弹出窗口不会在点击时激活。

我使用的是 0.13.4 版本。

Answer 1

popover-template 值应该是 string，换句话说，它需要 expression/scopeVariable.

<i popover-template="'popover-partial.html'" 
  popover-title="In Progress" 
  class="glyphicon glyphicon-info-sign">
</i>

Demo

Answer 2

您必须将模板公开到作用域才能使其工作。无论如何，这更好，因为现在您的模板可以通过在范围上设置变量和模型来更加动态。您还可以设置模板提供程序，这样就不会在 html 代码下包含所有这些小脚本标签。

在您看来：

<i popover-template="popover.templateUrl" 
popover-title="popover.title" class="glyphicon glyphicon-info-sign"></i>

<script type="text/ng-template" id="popover-partial.html">
<b>Jody</b>
</script>

在您的控制器中：

$scope.popover = {
templateUrl: 'popover-partial.html',
title: 'Title'
};