这是我之前没有回答的问题。我仍在寻求帮助 https://stackoverflow.com/questions/27230092/how-to-implement-popover-for-table-rows
我正在尝试在Popup上显示所选表行的详细信息，用我的方法我只能在表的第一行看到Popover上的数据。
以下是我的代码快照，请帮我整理一下
HTML代码：
<!DOCTYPE html>
<html ng-app="AngFactory">
<head>
<meta charset="ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com//twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="js/angular-resource.js"></script>
<script src="js/jQuery.js"></script>
<script src="modal/ConfigModal.js"></script>
<script src="main.js"></script>
<script src="services.js"></script>
<script src="mainController.js"></script>
<link href="css/myStyle.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body ng-controller="mainController">
<table class="hoverTable">
<thead >
<tr>
<th>PO Number</th>
<th>Document Type</th>aq
<th>Company Code</th>
</tr>
</thead>
<tr ng-repeat="X in resultSet " >
<td id="pop-over-link" ng-click="getPO_IT(X)">
<a ><test-directive></test-directive>{{X.PONumber}}</a>
</td>
<td >
{{X.DocType}}
</td>
<td >
{{X.CCode}}
</td>
</tr>
</table>
aq
<ul>
<li ng-repeat="Y in results">
<ul>
<li ng-repeat=" Z in Y.NavItem.results">
<b>PO Number </b>: {{Z.PoNumber}}
<b>PO Item </b>: {{Z.PoItem}}
<b>Material</b> : {{Z.Material}}
</li>
</ul>
</li>
</ul>
</body>
</html>
JS代码：
app.directive('testDirective', function($compile) {
return {
restrict: 'EAC',
templateUrl:'TemplateID.html',
link: function(scope, elements, attrs) {
$("#pop-over-link").popover({
'placement': 'right',
'trigger': 'click',
'html': true,
'container': 'body',
'content': function() {
return $compile($("#pop-over-content").html())(scope);
}
});
scope.testFunction = function() {
alert("it works");
console.log("maybe");
}
}
}
});
TemplateID.html
<body>
<div id='pop-over-content' style='display:none'>
<h3>Data goes here</h3>
{{X.PONumber}}
<ul>
<li ng-repeat="Y in results">
<ul>
<li ng-repeat=" Z in Y.NavItem.results">
<b>PO Number </b>: {{Z.PoNumber}}
<b>PO Item </b>: {{Z.PoItem}}
<b>Material</b> : {{Z.Material}}
</li>
</ul>
</li>
</ul>
<button class='btn btn-primary' ng-click='testFunction()'>Close</button>
</div>
</body>