8
我在當前項目中使用angular-ui-bootstrap，並且我需要在顯示行特定信息的網格中的每一行中打開一個彈出窗口。彈出窗口應該有自己的HTML模板，並且可以在HTML模板中綁定多個字段。這是我寫的實現相同的代碼。我確實嘗試通過html模板，但沒有運氣。任何幫助表示讚賞。Angular UI中的Popover模板
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}} <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/
我也通過傳遞嘗試選項popover-unsafe-html所述https://github.com/angular-ui/bootstrap/pull/641
你可以使用ui-bootstrap和angularstrap嗎？ –
@JoshC。你應該能夠做到這一點，因爲他們都使用不同的模塊/指令，不應該有任何衝突，他們都在同一個項目。 –