Angular UI 中的弹出框模板答案

【问题标题】：Popover Template in Angular UIAngular UI 中的弹出框模板
【发布时间】：2014-02-24 08:12:10
【问题描述】：

我在当前项目中使用 angular-ui-bootstrap，并且我需要在显示行特定信息的网格中的每一行中打开一个弹出框。弹出框应该有自己的 HTML 模板，并且可以在 HTML 模板中绑定多个字段。这是我为实现相同目标而编写的代码。我确实尝试过没有运气的 html 模板。任何帮助表示赞赏。

HTML 代码：

<div ng-app="helloAngular" ng-controller="casesCntrl">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th class="">Date</th>
        <th class="">Case</th>                    
        <th class="">Severity</th>                
        <th class="">Status</th>
        <th class="">Site</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="case in cases">
        <td>{{case.casedate | date:'MM/dd/yyyy'}}</td>  
        <td><a ng-href="#/site/{{case.id}}">{{case.name}}</a></td>
        <td ng-class="{'case-critical':case.severity==1, 'case-urgent':case.severity==2, 'case-normal':case.severity==3}"  class="case-none"></td>  
        <td>{{case.status}}</td>    
        <td>{{case.sitename}}&nbsp;<button popover="{{case.sitename}}" popover-title="{{case.sitedescription}}"  data-placement="bottom" data-trigger="focus" class="btn btn-default" popover-unsafe-html="This is a Help but please <b> focus </b> on this">V</button></td>    
      </tr>
    </tbody>
  </table>      
</div>

JS代码：

function CasesController($scope) {    

var casesData = [
  {

    "name": "Case -1",
    "casedate":"2013-06-26T08:02:00-0700",
    "caseid":1,
    "severity": "1",
    "status":"New",
    "siteid":1,
    "sitename":"Merchant Demo 1"
  },
  {
    "name": "Case -2",
    "casedate":"2013-01-26T08:02:00-0700",
    "caseid":2,
    "severity": "1",
    "status":"New",
    "siteid":2,
    "sitename":"Merchant Demo 2"
  },
  {
    "name": "Case -3",
    "casedate":"2013-02-26T08:02:00-0700",
    "caseid":3,
    "severity": "1",
    "status":"Accepted",
    "siteid":1,
    "sitename":"Merchant Demo 3"
  } ,
  {
    "name": "Case -4",
    "casedate":"2013-05-26T08:02:00-0700",
    "caseid":4,
    "severity": "2",
    "status":"New",
    "siteid":1,
    "sitename":"Merchant Demo 4"
  } ,
  {
    "name": "Case -5",
    "casedate":"2013-09-26T08:02:00-0700",
    "caseid":5,
    "severity": "3",
    "status":"New",
    "siteid":1,
    "sitename":"Merchant Demo 5"
  } ,
  {
    "name": "Case -6",
    "casedate":"2013-04-26T08:02:00-0700",
    "caseid":6,
    "severity": "1",
    "status":"Sent to billing",
    "siteid":1,
    "sitename":"Merchant Demo 6"
  },
  {
    "name": "Case -7",
    "casedate":"2013-10-26T08:02:00-0700",
    "caseid":7,
    "severity": "3",
    "status":"New",
    "siteid":1,
    "sitename":"Merchant Demo 7"
  }
 ];
$scope.cases = casesData;
}

这是与上述代码相同的小提琴： http://jsfiddle.net/anirbankundu/YyK5s/4/

我确实按照https://github.com/angular-ui/bootstrap/pull/641 中的描述通过 popover-unsafe-html 尝试了该选项

【问题讨论】：

标签： angularjs angular-ui

【解决方案1】：

目前无法完成，请查看以下问题了解更多详情： https://github.com/angular-ui/bootstrap/issues/220

您可以使用 angular-strap 来实现这一目标。详情请见：http://mgcrea.github.io/angular-strap/##popovers

【讨论】：

你能同时使用 ui-bootstrap 和 angularstrap 吗？
@JoshC。你应该能够做到这一点，因为它们都使用不同的模块/指令，将它们放在同一个项目中不应该有任何冲突。

【解决方案2】：

在 Angular UI bootsrap 版本 0.13.0 中引入了向弹出框提供模板的功能，使用 popover-template 属性获取模板的位置以用于弹出框主体。 http://angular-ui.github.io/bootstrap/#/popover

【讨论】：

请注意，弹出框及其溢出/放置在 0.13.0 github.com/angular-ui/bootstrap/issues/375 中仍然存在限制

【解决方案3】：

Faisal Feroz 在 angular-ui 上引用的未解决问题已关闭并添加到框架的 0.13.0 版本中，因此现在这是可能的。看看https://github.com/angular-ui/bootstrap/issues/220

【讨论】：