angularjs - 如果我单击页面中的任何位置，当模式弹出窗口关闭时重置表单

Question

我正在使用 Angular 1.3。我有一个模态弹出表单。提交表单后，我的模态弹出表单将被重置，如果我单击取消按钮，我的表单也会重置

    $scope.add_user =   function(add_form)
    {
        if(add_form.$valid)
        {
        $http({
           method:'POST',
           url:file_path,  
           headers:{'Content_Type':'appliaction/json'},
           data:$scope.text
        }).success(function(data){
           $scope.modalShown_add = ! $scope.modalShown_add; 
           $scope.modalShown_addsuccess = !$scope.modalShown_addsuccess; 
           $scope.getlist();
           add_form.reset();
        }).error(function(data){
            add_form.reset();
        })
    }
}

但是当我出现任何验证错误时，如果我单击页面的任何位置，我的模式弹出窗口会在我打开模式弹出窗口后关闭，我无法重置我的表单。假设如果我在添加中传递表单名称重置表单的函数我收到错误

 $scope.add  =function()
    {
       $scope.modalShown_add = ! $scope.modalShown_add; 
    }

Answer 1

每个 form 指令都会创建一个 FormController 实例，以便您可以通过设置 name 属性(如 name="$ctrl.addForm")来访问它>.

要清除表单，您需要清除模型，然后使用 form controller to control the validation state您的表单(请参阅 resetForm 方法):

angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
    var ctrl = this;
    
    ctrl.users = [];
    ctrl.showPopup = false;
    ctrl.openModal = openModal;
    ctrl.saveUser = saveUser;
    
    function openModal(user) {
      ctrl.showPopup = true;
      ctrl.user = angular.copy(user); // a copy of the user to disable 2-way binding with the list
      resetForm(ctrl.addForm);
    }
    
    function resetForm(form){
      form.$setPristine(); //set the form to its pristine state
      form.$setUntouched(); //set the form to its untouched state
    }
    
    function saveUser(user){
        //your saving logic here it is just a sample
        if (!user.id){
          user.id = ctrl.users.length;
          ctrl.users.push(user);
        } else {
          ctrl.users[user.id] = user;
        }
        
        //hide pop up
        ctrl.showPopup = false;
    }
    
    $scope.$ctrl = ctrl;
}])
.directive('modalDialog', function() {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true, 
    transclude: true,
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      if (attrs.width)
        scope.dialogStyle.width = attrs.width;
      if (attrs.height)
        scope.dialogStyle.height = attrs.height;
        if (attrs.overflow)
        scope.dialogStyle.overflow = attrs.overflow;
      scope.hideModal = function() {

        scope.show = false;
      };
    },
    template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'><i class='fa fa-times-circle'></i></div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"// See below
  };
});

.ng-invalid.ng-touched {
  border: 1px solid red; 
}

.ng-modal{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.ng-modal-overlay{
  background-color: black;
  opacity: 0.3;
  z-index: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.ng-modal-dialog {
  position: relative;
  top: 50%;
  z-index: 1;
  background-color: white;
  padding: 1em;
  border: 1px solid gray;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.3.20/angular.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
       <!-- send en empty object to create a new user -->
      <button ng-click="$ctrl.openModal({})">Show</button>
      
      <div>
        <a href="javasctript: void(0);" ng-repeat-start="u in $ctrl.users" ng-click="$ctrl.openModal(u)">{{u.name}}</a><span ng-repeat-end ng-if="!$last">, </span>
      </div>
      
      <modal-dialog show="$ctrl.showPopup">
          <form name="$ctrl.addForm" ng-submit="$ctrl.saveUser($ctrl.user)">
             <input name="user_name" ng-model="$ctrl.user.name" type="text" ng-required="true"/>
             <div>
                <button type="submit">Save</button>
                <button type="button" ng-click="$ctrl.showPopup = false;">Cancel</button>
             </div>
          </form>
      </modal-dialog>
  
  </div>
</div>

希望这对您有帮助。