Javascript提交不起作用

Question

这似乎是一个非常简单的问题，但是，无论出于何种原因，我的submit()方法未在JS中调用。

HTML：

<ion-view title="Register" hide-nav-bar="true" nav-transition="none" id="page9"> 
    <ion-content padding="true" class="manual-ios-statusbar-padding" scroll="false"> 
     <form id="register-form4" ng-submit="register()" class="list"> 
      <ion-list id="register-list4"> 
       <label class="item item-input" id="register-input7"> 
        <input type="text" ng-model="registration.email" placeholder="Email" required> 
       </label> 
       <label class="item item-input" id="register-input9"> 
        <input type="password" ng-model="registration.password" placeholder="Password" required> 
       </label> 
      </ion-list> 
     </form> 
     <a id="register-button7" ng-click="document.getElementById('register-form4').submit();" class="button button-positive button-block">Create Account</a> 
     <a ui-sref="login" id="register-button8" class="button button-positive button-block button-clear">Back</a> 
     <div ng-show="isError">{{ loginError }}</div> 
    </ion-content> 
</ion-view> 

控制器：

.controller('registerCtrl', ['$scope', '$stateParams', "$firebaseAuth", "$location", 
function ($scope, $stateParams, $firebaseAuth, $location) { 
    $scope.register = function() { 
    var email = $scope.registration.email, 
     password = $scope.registration.password, 
     confirmPassword = $scope.registration.confirmPassword; 

     console.log("Being submitted"); 
    } 
}]) 

我不能改变，即使它会更容易的<a>标签只是为了有一个表单提交input但HTML是汽车 - 由Ionic Creator生成，我不能搞砸了。

编辑：我想提交表单，通过这种方式，而不只是触发register()按钮的点击的原因是我想要触发HTML形式required的，这样检查领域得到了输入，所以我不必手动去做

编辑2：我已将<a>标记更改为提交按钮。然而，这仍然无法调用register()方法，建议的形式没有被提交：

<input type="submit" value="Create Account" id="register-button7" class="button button-positive button-block"> 

这些docs来看，它应该工作，因为它几乎是相同的格式

我已阅读，1用户标准的HTML submit和ng-submit不能一起工作。任何人都知道这是真的吗？

Answer 1

您可以在表单中使用submit类型的html input或button。这里是一个的jsfiddle工作演示：https://jsfiddle.net/ydbhb5dL/

控制器：

angular 
    .module('App', []) 
    .controller('ExampleController', function ($scope) { 
     $scope.registration = {}; 

     $scope.register = function() { 
      var email = $scope.registration.email, 
       password = $scope.registration.password; 

      console.log('Email:', email); 
      console.log('Password:', password); 
      console.log('Being submitted!'); 
     }; 
    }); 

HTML：

<div ng-app="App" ng-controller="ExampleController"> 
<ion-view title="Register" hide-nav-bar="true" nav-transition="none" id="page9"> 
    <ion-content padding="true" class="manual-ios-statusbar-padding" scroll="false"> 
    <form id="register-form4" ng-submit="register()" class="list"> 
     <ion-list id="register-list4"> 
     <label class="item item-input" id="register-input7"> 
      <input type="text" ng-model="registration.email" placeholder="Email" required> 
     </label> 
     <label class="item item-input" id="register-input9"> 
      <input type="password" ng-model="registration.password" placeholder="Password" required> 
     </label> 
     </ion-list> 

     <input type="submit" class="button-like-link" value="Create Account (button)"> 
    </form> 
    </ion-content> 
</ion-view> 
</div> 

Answer 2

解决您的问题改变<a>元素将表单提交

<a id="register-button7" ng-click="register()" class="button button-positive button-block">Create Account</a> 

原因ngClick不工作因为它正在查看$scope的document，这是未定义的。您可能会将以下行添加到您的控制器，但它不是必需的。

$scope.document = document; 

如果你坚持在不改变结构形式，您可以为您提交“按钮”一个类似于以下（另）一个新的指令。

angular.module('moduleName').directive('submitForm', function() { 
    return { 
     restrict: 'A', 
     scope:  { 
      formId: '=' 
     }, 
     link:  function($scope, $elem) { 
      $elem.on('click', function() { 
       document.getElementById($scope.formId).submit(); 
      }); 
     } 
    }; 
}); 

，你会再为使用如下：

<a id="register-button7" submit-form form-id="register-form4" class="button button-positive button-block">Create Account</a> 

如果你还不想改变<a>标签使用新的指令，你唯一的选择是定义$scope.document = document。

或者，如@J Orbe提到的，您可以使用onclick而不是依赖Angular指令（即ngClick和submitForm）。但我不确定这是否符合“Angular way”TM的标准，并且您可能希望避免混合使用Angular和常规JavaScript属性，因为这可能会导致混淆。通常，如果您使用的是Angular，则应该尝试使用Angular解决问题。