简短的问题...当模态中显示的部分视图中的表单无效时，有没有办法在Boostrap模态对话框上使用ng-disable？
长期问题...... 我在Asp.net MVC工作。我需要以模态形式包含部分视图。我需要表单在单击项目时显示详细信息以便可以编辑，或显示空白表单以供用户添加新记录。我可以使用Bootstrap Modal（数据目标）完美地完成所有工作以打开对话框。但是，因为我使用ng-click将更改保存到我的数据库。我无法使用数据关闭关闭对话框，因为该按钮位于局部视图中。如果我从部分删除保存按钮并将其放在父级上它可以正常工作，但是，我的ng-disable不能用于表单验证。我认为我已经通过切换到Angular ui-Modal解决了整个问题，但是当我包含该代码时，它在显示现有记录的细节时工作正常，但是根本没有打开模态以显示空白表单换新纪录。这让我疯狂了几个小时。
所以这就是......我需要使用ng-click关闭我的Angular Controller中的Bootstrap Modal，或者我必须弄清楚如何使用Angular ui-Modal显示空白表单。请帮忙！
这是我的cshtml视图中的模态：
<div class="container">
<!-- Modal -->
<div class="modal fade" id="addNewComment" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background-color:#003A5D; color:white">
<h4 class="modal-title">Comment View</h4>
</div>
<div style="background-color:red;color:white;margin-top:-3px">Questionnaire is Incomplete</div>
<div class="modal-body">
@Html.Partial("_AddNewComment")
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
以下是渲染的部分视图：
<div class="panel panel-primary">
<div class="panel-heading">Add New Comment</div>
<div class="panel-body" ng-repeat="cm in selection.comment">
<form name="CommentForm">
<table style="width:100%; border:none">
<tr>
<td style="border:none">
Short Comment (displayed on the Contractor's homepage)<br />
<div style="font-size:8px">Max 50 characters</div><br />
<input name="ShortComment" type="text" style="width:250px" value="{{cm.vchShortComment}}" ng-model="cm.vchShortComment" required />
<div role="alert"> <span class="error" ng-show="CommentForm.ShortComment.$error.required">Short Comment is required!</span></div>
</td>
<td style="border:none;width:40%">
<div class="panel panel-default">
<div ng-controller="ContractorCtrl">
<br />
<p class="input-group">
<span style="padding-left:30px">Start Date:</span><span style="float:right">
<input type="text" style="width:200px; height:30px" class="form-control" datepicker-popup="shortDate" ng-model="startDate" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="false" close-text="Close" />
</span>
<span class="input-group-btn">
<button style="height:30px" type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div ng-controller="ContractorCtrl">
<p class="input-group">
<span style="padding-left:30px">End Date:</span><span style="float:right">
<input type="text" style="width:200px; height:30px" class="form-control" datepicker-popup="shortDate" ng-model="endDate" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="false" close-text="Close" />
</span>
<span class="input-group-btn">
<button style="height:30px" type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<br />
<span style="padding-left:30px">Created By: {{user}}</span>
</div>
</td>
</tr>
</table>
Long Comment (shown as Pop-up on the Contractor's homepage)<br />
<div style="font-size:8px">Max 2000 characters</div><br />
<textarea style="width:100%;height:200px" ng-model="cm.vchLongComment" required>
{{cm.vchLongComment}}
</textarea>
<br />
<div>
<span style="float:left"><button type="button" class="btn btn-danger">Delete Comment</button> <button type="button" class="btn btn-primary">Archive</button></span><span style="float:right"><button type="button" style="background-color:#adabab; color:White; border-color:#adabab" data-dismiss="modal" class="btn btn-default" ng-click="clickTest()">Cancel</button> <button type="button" class="btn btn-primary" data-dismiss="modal" ng-disabled="CommentForm.$invalid" ng-click="saveComment()">Save</button></span>
</div>
</form>
</div>
</div>
以下是我的Angular Controller的代码：
$scope.clickTest = function (comment) {
debugger;
$scope.selection.comment.splice(comment);
};
$scope.ShowDetails = function (comment) {
debugger;
if (comment == undefined)
{
comment = [
{
id: 0,
vchShortComment: 'please add short comment',
vchLongComment: 'please add long comment'
}
]
}
$scope.selection.comment.push(comment);
//modalInstance = $modal.open({
// templateUrl: 'addNewComment',
// controller: ModalInstanceCtrl
// });
};
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
答案 0 :(得分：0)
我能够通过将整个模态包装在＆＃34;＆＃34;来解决我的所有问题。标签。我将按钮放在模态页脚中，现在数据目标，数据消除和表单验证都可以按需运行。以下是Modal的新HTML。我希望这有助于其他人！
<form name="CommentForm">
<div class="modal fade" id="addNewComment" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background-color:#003A5D; color:white">
<h4 class="modal-title">Comment View</h4>
</div>
<div style="background-color:red;color:white;margin-top:-3px">Questionnaire is Incomplete</div>
<div class="modal-body">
@Html.Partial("_AddNewComment")
</div>
<div class="modal-footer">
<span style="float:left"><button type="button" class="btn btn-danger">Delete Comment</button> <button type="button" class="btn btn-primary">Archive</button></span><span style="float:right"><button type="button" style="background-color:#adabab; color:White; border-color:#adabab" data-dismiss="modal" class="btn btn-default" ng-click="clickTest()">Cancel</button> <button type="button" class="btn btn-primary" data-dismiss="modal" ng-disabled="CommentForm.$invalid" ng-click="saveComment()">Save</button></span>
</div>
</div>
</div>
</div>
</form>