AngularJS 1.4.4：IE9下外部按钮触发表单提交失效的解决咨询

嘿，我之前维护AngularJS 1.4.x项目时刚好碰到过一模一样的IE9坑，太懂这种跨浏览器踩坑的糟心了！既然你已经能拿到表单对象，其实有两种靠谱的方式来触发提交，完美绕开IE9的兼容性问题：

方案一：调用表单的原生submit()方法 #

这是最直接的方式，能绕过Angular在IE9里的事件绑定bug：

步骤说明 #

1. 确保你的表单有id和name属性（方便获取表单对象）：

<form id="myForm" name="myForm" ng-submit="handleSubmit()" novalidate>
  <!-- 表单字段 -->
  <input type="text" ng-model="username" required>
  <span ng-show="myForm.username.$touched && myForm.username.$error.required">用户名不能为空</span>
</form>

2. 外部按钮绑定点击事件：

<button ng-click="triggerFormSubmit()">提交表单</button>

3. 在控制器中实现触发函数：

$scope.triggerFormSubmit = function() {
  // 先验证表单有效性（如果需要的话）
  if ($scope.myForm.$valid) {
    // 方式A：通过DOM ID获取表单并调用原生submit
    document.getElementById('myForm').submit();
    
    // 方式B：如果已经通过Angular拿到表单对象，直接用$element访问原生DOM
    // $scope.myForm.$element[0].submit();
  } else {
    // 表单无效时，标记所有字段为已触碰，显示错误提示
    angular.forEach($scope.myForm.$error, function(fields) {
      fields.forEach(function(field) {
        field.$setTouched();
      });
    });
  }
};

方案二：直接调用表单绑定的ng-submit函数 #

如果你的表单已经通过ng-submit绑定了提交逻辑，也可以直接调用这个函数，更贴合Angular的逻辑：

$scope.triggerFormSubmit = function() {
  if ($scope.myForm.$valid) {
    // 直接调用ng-submit绑定的函数
    $scope.handleSubmit();
    // 同时手动标记表单为已提交状态（如果需要同步UI状态）
    $scope.myForm.$setSubmitted();
  } else {
    // 同样处理无效表单的提示
    angular.forEach($scope.myForm.$error, function(fields) {
      fields.forEach(function(field) {
        field.$setTouched();
      });
    });
  }
};

为什么IE9会出问题？ #

AngularJS 1.4.x在IE9中对表单外部的<button type="submit">支持有bug：IE9的事件冒泡机制和Chrome不同，Angular无法正确捕获到外部按钮触发的submit事件。而直接调用原生submit()方法，或者手动调用提交函数，能完全绕开这个兼容性问题。

之前你试的ng-attr-type没用，是因为IE9对动态修改元素type属性的支持很差，这个方案本身就不稳定。

内容的提问来源于stack exchange，提问作者José Oliveros