使用Angular引导模态多重问题

简短的问题…是否有任何方法使用ng-disable在一个引导模态对话框当一个窗体在部分视图中显示的模态是无效的?

长问题…我在Asp.net MVC工作。我需要包括一个模态形式的部分视图。我需要表单在单击项目时显示详细信息，以便对其进行编辑，或者显示空白表单，以便用户添加新记录。我可以让一切工作只是完美地使用引导模式(数据目标)打开对话框。但是，由于我使用ng-click将更改保存到数据库中。我无法使用data-解散关闭对话框，因为按钮位于部分视图中。如果我从部分中删除保存按钮并将其放在父组件上，它可以正常工作，但是，我的ng-disable不能用于表单验证。我以为我已经通过切换到Angular ui-Modal解决了整个事情，但是当我包含该代码时，它在显示现有记录的详细信息时工作得很好，但根本不会打开模态来显示新记录的空白表单。这已经让我发疯好几个小时了。

就是这样…我需要使用ng-click从我的Angular控制器中关闭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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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控制器的代码:

 $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');
        };
    };