ui.bootstrap.modal を使用して次のことを試しました)。これが、bootstrap.modal に使用しているコードです: HTML ファイル内:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Program Account Checklist!</h3>
</div>
<div class="modal-body" id="modal-body">
<table>
<colgroup span="2"></colgroup>
<thead>
<tr>
<th colspan="2" scope="colgroup">Is your organization:</th>
<th>CRA Program Account</th>
</tr>
</thead>
<tbody>
<tr>
<td> checkbot </td>
<td> info </td>
<td> account </td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="">Cancel</button>
<button class="btn btn-primary" type="button" ng-click="">Clear</button>
<button class="btn btn-primary" type="button" ng-click="">Submit</button>
</div>
</script>
私のcontroller.jsで：
$scope.open = function() {
var modalInstance = $uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
resolve: {
items: function () {
return $scope.checklist;
}
},
size: 'lg'
})
問題は、テーブルを含むウィンドウをポップアップしようとすると、データが正しい位置に表示されますが、テーブルの UI がないことです。すべてがプレーンテキストのように見えます。type="text/ng-template" と関係があると思います。しかし、私はそれを回避する方法を理解できませんでした。この問題を解決するにはどうすればよいですか?
