我有一个从服务器返回的消息列表，我正在使用angular将这些消息模板化为表中的行。这一切都运行正常，但我想拥有它，所以当你点击一行模式弹出该行信息时。不幸的是，angular似乎完全忽略了隐藏元素，即使模态位于app和controller命名空间内（不确定命名空间是否是正确的术语）。我已经google了一下，发现了输入字段的BUNCH修复，但没有简单的绑定。这是我的代码。
HTML（表格）
<div class="ui modal">
<div class="header">Message</div>
<div class="content" style="background: none">
<div><strong>Sent: </strong>[[ currentMessage.sent_at ]]</div>
<div><strong>From: </strong>[[ currentMessage.email ]]</div>
<div><strong>Phone: </strong>[[ currentMessage.phone || 'N/A' ]]</div>
<div><strong>Subject: </strong>[[ currentMessage.subject ]]</div>
<div style="margin-top: 10px">
<h1>Message</h1>
[[ currentMessage.body ]]
</div>
</div>
</div>
的JavaScript
$('.modal.ui').modal();
var app = angular.module('messages', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
app.controller('MessagesCtrl', function($scope, $http) {
$scope.currentMessage = {};
$http.get('{{ route('message.index') }}').then(function(resp) {
$scope.messages = resp.data.messages;
});
$scope.show = function(message) {
$scope.currentMessage = message;
}
});
HTML（全部）
<div style="padding: 10px" data-ng-app="messages" data-ng-controller="MessagesCtrl">
<table class="table ui celled striped">
<thead>
<tr style="text-align: center">
<th class="collapsing">Email</th>
<th class="collapsing">Phone</th>
<th>Subject</th>
<th style="width: 100px">Options</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="message in messages | orderBy:['viewed', 'created_at']" class="message">
<td>[[ message.email ]]</td>
<td>[[ message.phone || 'N/A' ]]</td>
<td>[[ message.subject ]]</td>
<td>
<a href="[[ message.mail_link ]]" style="color: #000"><i class="icon reply"></i></a>
<i class="icon unhide" data-ng-click="show(message)"></i>
<i class="icon trash" data-ng-click="destroy(message)"></i>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<strong style="font-size: 1.5em">No messages</strong>
</td>
</tr>
</tbody>
</table>
<div class="ui modal">
<div class="header">Message</div>
<div class="content" style="background: none">
<div><strong>Sent: </strong>[[ currentMessage.sent_at ]]</div>
<div><strong>From: </strong>[[ currentMessage.email ]]</div>
<div><strong>Phone: </strong>[[ currentMessage.phone || 'N/A' ]]</div>
<div><strong>Subject: </strong>[[ currentMessage.subject ]]</div>
<div style="margin-top: 10px">
<h1>Message</h1>
[[ currentMessage.body ]]
</div>
</div>
<div class="actions">
<a class="ui button green icon mini labeled">
<i class="icon reply"></i>
Reply
</a>
<button class="ui button red icon mini labeled">
<i class="icon trash"></i>
Delete
</button>
</div>
</div>
答案 0 :(得分：0)
我弄明白了这个问题。对于那些在初始化模态时使用语义ui（也许还有bootstrap）的人，脚本会将它从你放置它的位置（在app指令中）移动到body标签的底部。就像@Maher在他的例子中所做的那样，整个身体都是应用程序和控制器来解决这个问题。
答案 1 :(得分：0)
这是一个完整的例子：我使用bootstrap作为开放式模式
<!doctype html>
<html ng-app="messages" ng-controller="MessagesCtrl">
<head>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/angular.js"></script>
</head>
<body>
<div>
<table class="table table-bordered">
<thead>
<tr style="text-align: center">
<th class="collapsing">Email</th>
<th class="collapsing">Phone</th>
<th>Subject</th>
<th style="width: 100px">Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="message in messages" class="message">
<td>{{ message.email }}</td>
<td>{{ message.phone || 'N/A' }}</td>
<td>{{ message.subject }}</td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" ng-click="openModal(message)">
show message
</button>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">
remove message
</button>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<strong style="font-size: 1.5em">No messages</strong>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Message</h4>
</div>
<div class="modal-body">
<div><strong>Sent: </strong>{{ currentMessage.sent_at }}</div>
<div><strong>From: </strong>{{ currentMessage.email }}</div>
<div><strong>Phone: </strong>{{ currentMessage.phone || 'N/A' }}</div>
<div><strong>Subject: </strong>{{ currentMessage.subject }}</div>
<div style="margin-top: 10px">
<h1>Message</h1>
{{ currentMessage.body }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Delete</button>
<button type="button" class="btn btn-primary">Reply</button>
</div>
</div>
</div>
</div>
<script>
angular.module("messages", []);
angular.module("messages").controller("MessagesCtrl", function($scope) {
$scope.messages = [{
email: "x@x.com",
phone: "092222222",
subject: "test",
sent_at: "2015/15/15",
body: "your message"
}];
$scope.openModal = function(message) {
$scope.currentMessage = message;
}
});
</script>
</body>
</html>