Question

我有一个用ui.bootstrap创建的模态对话框。当我使用$uibModal或$uibModalInstance执行某些代码时，在此模式的控制器内，AngularJS尝试从对话框中调用<form>的提交方法。此外，我的<form>没有submit属性，但它具有ng-submit属性。

以下是我的模态对话框的一部分：

<div class="modal-content">
    <form name="newActionForm" class="form-horizontal" role="form" ng-submit="">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">{{ 'action.labelNewAction' | translate }}</h4>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="col-sm-3 control-label site-form-label">{{ 'common.labelName' | translate }}:</label>
                <div class="col-sm-9 input-group padding_right_left_15" ng-class=" newActionForm.name.$valid ? 'has-success' : 'has-error' ">
                    <input required ng-maxlength="160" ng-change="vm.test()" name="name" class="form-control" ng-model="vm.newAction.name"/>
                    <span class="input-group-addon">
                        <i class="glyphicon glyphicon-remove" ng-show="newActionForm.name.$error.required" tooltip="{{'formValidationRequired' | translate}}"></i>
                        <i class="glyphicon glyphicon-remove" ng-show="newActionForm.name.$error.maxlength" tooltip="{{'formValidationNameTooLong' | translate}}"></i>
                        <i class="glyphicon glyphicon-ok" ng-show="newActionForm.name.$valid"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button ng-disabled="newActionForm.$invalid"  class="btn btn_kassir" ng-click="vm.addAction()">{{ 'common.labelButtonAdd' | translate }}</button>
            <button class="btn btn-default" ng-click="close()">{{ 'common.labelButtonClose' | translate }}</button>
        </div>
    </form>
</div>

和两个函数的模态控制器，试图在我的表单上执行sumbit：

angular
        .module('newActionDialog')
        .controller('NewActionDialogController',
            [ '$scope', '$stateParams', '$uibModalInstance', 'Requester', '$uibModal', '$filter', '$translate', 'alertService', NewActionDialogController]);

    function NewActionDialogController($scope, $stateParams, $uibModalInstance,  Requester, $uibModal, $filter, $translate, alertService) {
        var vm = this;

        vm.showSelectHall=function(){
            $uibModal.open({
                templateUrl:  'app/repertoire/listHalls.html',
                controller: function ($scope, $uibModalInstance) {
                    this.select = function (hallConfig) {
                        $uibModalInstance.close(hallConfig);
                    };
                },
                controllerAs: 'ctrl',
            }).result.then(function (hallConfig) {
                vm.newAction.defaultHallConfiguration=hallConfig;
            });
        };

        ......       

        vm.close=function(){
            $uibModalInstance.close();
        }
    }

Answer 1

问题已经解决，因为$uibModal.open()方法默认情况下会创建一个带<buttons type="submit">的模态，因此问题已经解决。因此，在$uibModal.open() <button>转换为<button type="submit>之后。解决方案是添加到所有按钮type="button"，当然除了真正的提交按钮。

$ uibModal尝试在我的表单中强制执行提交

1 个答案: