重置表单当我点击页面中的任何位置时{mod}关闭modalpop up

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();
        })
    }
}

但当我有任何验证错误，如果我点击我的页面的任何地方我的模态弹出窗口打开模态弹出窗口后关闭我无法重置我的form.Suppose如果我传递形式名称添加函数重置表单我收到错误

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

Answer 1

每个form指令都会创建FormController的实例，因此您可以通过设置名称属性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>

希望这会对你有所帮助。