Question

我的HTML中有以下代码段：

<a ng-href="#" popover popover-template="views/popovers/cu.html" popover-trigger="click" popover-placement="top">
  <img ng-src="{{chat.avatar}}" width="50" height="40">
</a>

单击a标记不会触发弹出窗口。 Popover在我的应用程序中没有HTML，但没有。

我基本上从这里的文档中复制了“带模板的弹出窗口”部分：https://angular-ui.github.io/bootstrap/#/popover

但它仍然不像上面的例子中那样起作用。

怎么了？

Answer 1

试试这个：假设您没有使用脚本标记，并且您使用的是单独的html文件，请在popover-template中添加额外的单引号。请参阅plunkr上的示例。因此，应该是popover-template="'cu.html'"而不是popover-template="cu.html"。

<a ng-href="#" popover-template="'cu.html'" popover-trigger="click" popover-placement="top" >
  <img ng-src="{{chat.avatar}}" width="50" height="50">
</a>

编辑：实现此目的的另一种方法是使用脚本标记并使用“text / ng-template”作为类型。 id将是您放在popover-template中的文本。在plunkr上查看此版本。

所以我会这样看：

<a ng-href="#" popover-template="'cu.html'" popover-trigger="click" popover-placement="top">
  <img ng-src="{{chat.avatar}}" width="50" height="50">
</a>

<script type="text/ng-template" id="cu.html">
    <div>
      Hey there!
    </div>
</script>

Angular UI Bootstrap Popover w / HTML无法运行

1 个答案: