Angular UI 中的弹出模板 [英] Popover Template in Angular UI

问题描述

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

HTML 代码:

<table class="table table-bordered"><头><tr><th class="">Date</th><th class="">Case</th><th class="">Severity</th><th class="">Status</th><th class="">站点</th></tr></thead><tr ng-repeat="case in case"><td>{{case.casedate |日期:'MM/dd/yyyy'}}<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}" 类="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="这是一个帮助，但请<b>关注</b>这个">V</button></td></tr></tbody>

JS代码:

function CasesController($scope) {var caseData = [{"name": "案例-1","casedate":"2013-06-26T08:02:00-0700","caseid":1,"严重性": "1","状态":"新","siteid":1,"sitename":"商家演示 1"},{"name": "案例-2","casedate":"2013-01-26T08:02:00-0700","caseid":2,"严重性": "1","状态":"新","siteid":2,"sitename":"商家演示 2"},{"name": "案例-3","casedate":"2013-02-26T08:02:00-0700","caseid":3,"严重性": "1","状态":"已接受","siteid":1,"sitename":"商家演示 3"} ,{"name": "案例-4","casedate":"2013-05-26T08:02:00-0700","caseid":4,"严重性": "2","状态":"新","siteid":1,"sitename":"商家演示 4"} ,{"name": "案例-5","casedate":"2013-09-26T08:02:00-0700","caseid":5,"严重性": "3","状态":"新","siteid":1,"sitename":"商家演示 5"} ,{"name": "案例-6","casedate":"2013-04-26T08:02:00-0700","caseid":6,"严重性": "1","status":"已发送到帐单","siteid":1,"sitename":"商家演示 6"},{"name": "案例-7","casedate":"2013-10-26T08:02:00-0700","caseid":7,"严重性": "3","状态":"新","siteid":1,"sitename":"商家演示 7"}];$scope.cases = caseData;}

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

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

解决方案

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

I am using angular-ui-bootstrap in my current project, and I have a requirement for a popover to open up in each row in a grid displaying row specific information. The popover should have its own HTML template and there are multiple fields that can be bound in the HTML template. Here is the code I have written to achieve the same. I did try to pass the html template with no luck. Any help is appreciated.

HTML Code:

<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 Code:

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

Here is the fiddle that has the same code as described above: http://jsfiddle.net/anirbankundu/YyK5s/4/

I did try the option by passing popover-unsafe-html as described in https://github.com/angular-ui/bootstrap/pull/641

解决方案

The functionality to provide a template to a popover is introduced in angular UI bootsrap version 0.13.0 using popover-template attribute which takes the location of a template to use for the popover body. http://angular-ui.github.io/bootstrap/#/popover

这篇关于Angular UI 中的弹出模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！