angular-ui：使用弹出框模板答案

【问题标题】：angular-ui: Using popover-templateangular-ui：使用弹出框模板
【发布时间】：2015-12-31 02:29:45
【问题描述】：

我之前发布了一个问题：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 版。

【问题讨论】：

标签： angularjs angular-ui-bootstrap angular-ui popover

【解决方案1】：

popover-template 的值应该是string，换句话说，它需要一个expression/scopeVariable。

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

Demo

【讨论】：

我刚改成<i popover-template="'popover-partial.html'" popover-title="In Progress" class="glyphicon glyphicon-info-sign"></i>，点击还是没有激活。

【解决方案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'
};

【讨论】：