提交ng-submit的角度表单提交未被调用

时间:2014-09-27 19:17:54

标签: angularjs

我尝试使用angular进行简单的提交,但是$ scope.account_create.submit函数永远不会在提交时被调用,我将name属性添加到表单中,确保提交按钮位于表格标签,但仍然没有运气

控制器

var tapp = angular.module('tailorapp.controllers').controller(
  'AccountCtrl', 
  ['$scope', '$state' , '$stateParams', '$ionicLoading', '$resource', 'localStorageService', 'settings', 'api', 'notification',
  function($scope, $state, $stateParams, $ionicLoading,  $resource, localStorageService, settings, api, notification) {

    var _returnPath = $stateParams.returnPath;
    $scope.mode = "signup";
    $scope.account_create = {};

    $scope.showSignIn = function(){
      $scope.mode = "signin";
    };
    $scope.showSignUp = function(){
      $scope.mode = "signup";
    };   

   $scope.account_create.submit = function(item, event) {
        _create_account($scope.account_create).success(function(data){
          $state.go( _returnPath );
        });
    };

HTML

<ion-view title="Account">

<ion-nav-buttons side="right">
    <button class="button button-icon icon ion-bag righthd-icon" ng-click="gotoCart();"></button>
    <button class="button button-icon icon ion-person righthd-icon"></button>
</ion-nav-buttons>

<ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>

<ion-content class="has-header">

    <div ng-show="mode == 'signup'">
        <form name="account_create"  ng-submit="account_create.submit()">
            <div class="card">
...
                <div class="item item-divider">
                    <button class="button button-positive" type="submit">Create Account</button>

3 个答案:

答案 0 :(得分:5)

我发现当在表单元素或表单元素之前直接调用的元素上没有直接调用ng-controller时,不会调用ng-submit。经过8个小时试图弄清楚为什么在ng-submit中没有发生任何事情,我真的很难找到这样的规则。

答案 1 :(得分:4)

您的表单名称也是account_create。因此,angular将使用支持form指令的NgFormController实例替换包含submit函数的自己的acount_create对象。

答案 2 :(得分:2)

将属性name添加到表单时,您将在$ scope中使用该名称创建一个varibale。在您的代码中,通过添加name="account_create",您将覆盖控制器中定义的$scope.account_create

https://docs.angularjs.org/api/ng/directive/form

如果您重命名表单,它应该有效。