繁体   English   中英

Angular.js ng-submit触发两次,但未从表单获取值

[英]Angular.js ng-submit fired twice and didn't get the values from form

我在angularjs中有一个表单

<form ng-submit="addNewNote(noteData)">
        <button type="submit"  class="md-icon-button ion-nav-button-right md-button md-default-theme" aria-label="Setting" tabindex="0">
            {{noteTxt}}
        </button> 
 <ion-content>
<div id="note-detail-content">
                <md-input-container md-no-float>
                    <input required name="noteTitle" placeholder="Note Title (Required)" ng-model="noteData.title">
                </md-input-container>
                <textarea rows="7" ng-model="noteData.description" maxlength="250"
                          placeholder="Write something here ...."></textarea>
                <span>
                </span>
            </div><!--end content section-->
        </ion-content>
    <!--end note detail section-->
      </form>

问题是ng-submit触发了两次,即使存在值, noteData.title也不读取任何值。 我收到这个错误

Cannot read property 'title' of undefined

我已经检查了这个问题,但是我的代码没有两次包含角度,如果是,我该如何检查?

$scope.addNewNote=function(noteData){
    alert(noteData.title);
}

index.html链接

    <!-- Ionic javascript lib -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- end Ionic javascript lib -->

    <!-- Angular javascript lib -->
    <script src="lib/angular-messages.js"></script>
    <script src="lib/angular-aria.js"></script>
    <script src="lib/angular-material.js"></script>
    <!-- end Angular javascript lib -->

    <!-- Cordova script (this will be a 404 during development) -->
    <script src="lib/ng-cordova.js"></script>
    <script src="cordova.js"></script>

更新 app.js文件

.state('app.addnote', {
                url: "/addnote",
                cache: false,
                views: {
                    'menuContent': {
                        templateUrl: "templates/note/html/note-add.html",
                        controller: 'AddNotesCtrl'
                    }
                }
            })
            .state('app.notelist', {
                url: "/notelist",
                params:{
                    isAnimated:true
                },
                cache: false,
                views: {
                    'menuContent': {
                        templateUrl: "templates/application-storage/local-application-db/html/note-list.html",
                        controller: 'noteListCtrl'
                    }
                }
            }

Controller.js

  var appControllers = angular.module('starter.controllers', []); // Use for all controller of application.
    var appServices = angular.module('starter.services', []);// Use for all service of application.

appControllers.controller('AddNotesCtrl',function($scope,$rootScope,$state,$mdToast){


}

我不知道为什么它会触发/提交两次(您确定没有双重函数声明或两次声明控制器,例如在html和route等中?)。 它对我来说不是这样做的,但是对于第二个问题,它不提交数据。 您是否在控制器的任何地方声明了变量noteData 如果您在控制器中对其进行设置,然后捕获这样的Submit函数,则它将显示数据:

$scope.noteData = [];

$scope.addNewNote = function(noteData) {
  console.log('form submitted');
  console.log(noteData);
};

编辑:

请检查SO上的此帖子以解决表单提交两次的问题。 您的问题不是与问题中提供的代码重复,因此您必须在其他地方导致此问题。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM