从指令触发 ng-submit答案

【问题标题】：Trigger ng-submit from directive从指令触发 ng-submit
【发布时间】：2019-01-25 06:55:34
【问题描述】：

已提出此类类似问题，我遵循了所有建议，但仍无法从指令触发提交。我有多个表单元素用于多步表单验证，并且我有一个单击按钮来验证所有表单。这是html。

<form name="employeePersonalForm" ext-submit
      ng-submit="emp.submittedForm(employeePersonalForm)" novalidate>
   <div layout="row">
       <div class="default-form-item pr-3" ng-class="{'md-input-invalid': employeePersonalForm.$submitted && employeePersonalForm.firstName.$invalid}" flex>
           <label class="default-label required">First Name {{employeePersonalForm.firstName.$invalid}} - {{employeePersonalForm.$submitted}}</label>
            <div class="default-input-wrapper">
                <input ng-model="emp.firstName" class="default-input" name="firstName" type="text" required>
                <p class="default-input-error">This field is required</p>
            </div>
       </div>
       <div class="default-form-item pl-3" flex>
           <label class="default-label required">Last Name</label>
           <div class="default-input-wrapper">
               <input ng-model="emp.lastName" class="default-input" type="text" required>
                <p class="default-input-error">This field is required</p>
           </div>
       </div>
    </div>
</form>

这种类型的多重表单存在于页面中。还有一个外部按钮如下。

<button class="default-btn default-btn--green" type="button" ng-click="nextStep($event)">Next</button>

单击下一步按钮时，我正在广播事件以提交表单。这是控制器部分。

emp.submittedForm = function(form) {
    if($scope.step==1) {
        alert(form.employeePersonalForm.$valid ? 'Valid' : 'Invalid!!!');
    }
}
$scope.nextStep = function() {
    if($scope.step == 1) {
        $rootScope.$broadcast('makeSubmit', {formName: 'employeePersonalForm'})
    }
};

我在指令 ext-submit 中捕捉到这个事件，如下所示

(function () {
'use strict';

angular
    .module('app')
    .directive('extSubmit', ['$timeout', externalSubmit]);
/* @ngInject */
function externalSubmit($timeout) {
    return {
        link: function(scope, el, attr) {
            scope.$on('makeSubmit', function(event, data){
              if(data.formName === attr.name) {
                $timeout(function() {
                    el.triggerHandler('submit');
                }, 0, false);   
              }
            })
        }
    };
  }
})();

但它没有触发 ng-submit。我遵循了这个建议this link

【问题讨论】：

标签： angularjs

【解决方案1】：

一种方法是简单地执行ng-submit属性中的函数：

app.directive('extSubmit', ['$timeout', externalSubmit]);
/* @ngInject */
function externalSubmit($timeout) {
    return {
        require: "form",
        link: function(scope, elem, attrs, form) {
            scope.$on('makeSubmit', function(event, data){
              if(data.formName === attrs.name) {
                //SET submitted state
                form.$setSubmitted();
                //EVALUATE ng-submit
                scope.$eval(attr.ngSubmit);
                //$timeout(function() {
                //    elem.triggerHandler('submit');
                //}, 0, false);   
              }
            })
        }
    };
  }
})

有关详细信息，请参阅

【讨论】：

谢谢。效果很好。但是当我们可以使用 eval 执行 ng-submit 时，为什么需要执行 form.setSubmitted 呢？执行ng-submit后不应该自动提交吗？
另外，我需要将员工表格传递给我的控制器，以检查表格是否有效，并据此进入下一个表格。
控制器为什么不直接调用emp.submittedForm()？将 rootScope 事件广播到指令以在属性上执行 AngularJS 表达式似乎很复杂。