繁体   English   中英

AngularJS和Bootstrap模态形式。 为什么数据会在取消时提交

[英]AngularJS & Bootstrap modal Form. Why data is getting submitted on cancel

我在模式表单中遇到AngularJS和Bootstrap UI的问题,其中取消表单触发提交。 这是我的Plunker来展示我的问题。 在取消时,我得到一个内部提醒,不应该发生。 这个片段有什么问题?

标记

     <div ng-controller="modalForm">
        <script type="text/ng-template" id="myModalContent.html">

                <div id="messages" class="well" ng-show="message">{{ message }}</div>
                <form name="addDomainForm" novalidate ng-submit="submit(addDomainForm)">
                <div class="modal-header">
                    <h6 class="modal-title"><i class="fa fa-plus"></i> add new Item </h6>
                </div>

                <div class="modal-body">

                        <div class="form-group">
                            <input type="domain" ng-model="formData.domain" class="form-control" id="domainAddress" placeholder="Domain Adresse">
                        </div>

                        <textarea rows="10" ng-model="formData.description" class="form-control" placeholder="Beschreiben Sie Ihre Aktivität" ng-minlength="15"></textarea>

                </div>

                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary" value="Save" />
                    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                </div>
                </form>


            </script>

            <button class="btn btn-success" ng-click="open()"><i class="glyphicon glyphicon glyphicon-plus-sign icon-plus-sign"></i> new Item </button>

</div>

angular.module("testModal", ['ui.bootstrap'])
.controller("modalForm", function($scope, $modal) {
  $scope.addDomainForm = {};

  $scope.open = function (size) {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      size: size
    });

  };

}); 

var ModalInstanceCtrl = function ($scope, $modalInstance,$log) {

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };

  $scope.submit = function(addDomainForm) {
   alert();
  };

};

添加类型属性; type="button"对我有用:

例;

 <button type="button" class="btn btn-warning" ng-click="authModel.cancel()">Cancel</button>`

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM