AngularJS ng-submit函数未执行

Question

I'm developing a AngularJS project, and i have a template which displays a table of users, & then has a button (which raises a modal form) to Add a new user.

The table displays fine, the modal form is raised on the button click, but the submit function tied to the form is never fired upon clicking the submit function. Here's an image of the template...

A user then clicks on "Add Staff" which raises the modal...

And after the user fills in the form, the ng-submit function is never being fired.

Here's the HTML code of the template;

<div data-ng-controller="admController">
    <div class="page-wrapper">
        <div class="banner notdark-translucent-bg" style="background-image:url('assets/images/banner/admin.jpeg'); background-position: 50% 50%;">
            <div class="breadcrumb-container">
                <div class="container">
                     <ol class="breadcrumb">
                        <li class="breadcrumb-item"><i class="fa fa-home pr-2"></i><a class="link-dark" href="home">Home</a></li>
                        <li class="breadcrumb-item active">Administration</li>
                    </ol>
                </div>
            </div>
        </div>

        <section class="main-container">
            <div class="container">
                <div class="row">
                    <div class="main col-lg-8">
                         <h1 class="page-title">Administration</h1>
                         <div class="separator-2"></div>
                    </div>
                </div>
            </div>
        </section>

        <div class="container">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead class="thead-dark">
                        <tr>
                            <th class="text-center">Name</th>
                            <th class="text-center">Address</th>
                            <th class="text-center">Suburb</th>
                            <th class="text-center">Post Code</th>
                            <th class="text-center">Email</th>
                            <th class="text-center">Phone</th>
                            <th class="text-center">  </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="text-center" data-ng-repeat="o in obj">
                            <td>{{o.name}}</td>
                            <td>{{o.address}}</td>
                            <td>{{o.suburb}}</td>
                            <td>{{o.postcode}}</td>
                            <td>{{o.email}}</td>
                            <td>{{o.phone}}</td>
                            <td><input type="radio" name="id" id={{o.id}} value={{o.id}}/></td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">Add Staff</button>
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#editModal">Edit Staff</button>
                <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#deleteModal">Delete User</button>
            </div>
        </div>
    </div>

        <div class="modal" id="addModal" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header text-center">
                <h5 class="modal-title text-center">Add New Staff</h5>
              </div>
              <div class="modal-body">

                        <form data-ng-submit="addstaffform()" name="addstaffform" method="POST">
                          <div class="form-group">
                            <label for="name">Full Name:</label>
                            <input type="text" class="form-control form-control-sm" name="name" id="name" placeholder="">
                          </div>
                          <div class="form-group">
                            <label for="address">Address:</label>
                            <input type="text" class="form-control form-control-sm" name="address" id="address" placeholder="">
                          </div>
                            <div class="form-group">
                                <label for="suburb">Suburb:</label>
                                <input type="text" class="form-control form-control-sm" name="suburb" id="suburb" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="postcode">Post Code:</label>
                                <input type="tel" class="form-control form-control-sm" name="postcode" id="postcode" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="phone">Phone:</label>
                                <input type="tel" class="form-control form-control-sm" name="phone" id="phone" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control form-control-sm" name="email" id="email" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="suburb">Password:</label>
                                <input type="password" class="form-control form-control-sm" name="password" id="password" placeholder="">
                            </div>
                          <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="reset" value="Reset" class="btn btn-secondry">Clear</button>
                        </form>
              </div>
            </div>
          </div>
        </div>

        <div class="modal" id="editModal" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title text-center">Edit Staff</h5>
                <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>-->
              </div>
              <div class="modal-body">
                        <form ng-submit="submit(editstaffform)" name="editstaffform" method="post" action="" role="form">
                            <div class="form-group">
                                <label for="name">Full Name:</label>
                                <input type="text" class="form-control form-control-sm" name="name" id="name" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="address">Address:</label>
                                <input type="text" class="form-control form-control-sm" name="address" id="address" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="suburb">Suburb:</label>
                                <input type="text" class="form-control form-control-sm" name="suburb" id="suburb" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="postcode">Post Code:</label>
                                <input type="tel" class="form-control form-control-sm" name="postcode" id="postcode" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="phone">Phone:</label>
                                <input type="tel" class="form-control form-control-sm" name="phone" id="phone" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control form-control-sm" name="email" id="email" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="suburb">Password:</label>
                                <input type="password" class="form-control form-control-sm" name="password" id="password" placeholder="">
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="reset" value="Reset" class="btn btn-secondry">Clear</button>
                        </form>
              </div>

            </div>
          </div>
        </div>

        <div class="modal" id="deleteModal" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <p>Modal body text goes here.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>

</div> <!-- End Controller -->

And here's the Angular Controller

app.controller("admController", function ($scope, $http, $location) {
        $(document).ready(function() {
            getStaff();
        });

        $scope.addstaffform = function() {
            $scope.formData = {};
                $http({
                    method  : 'POST',
                    url     : 'assets/php/addStaff.php',
                    data    : $.param($scope.formData),  //param method from jQuery
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  //set the headers so angular passing info as form data (not request payload)
                }).success(function(data){
                    console.log(data);
                    if (!data.success) { //success comes from the return json object

                        $scope.result='bg-success';
                    } else {
                        $('#addModal').modal('hide');
                        getStaff();

                        $scope.result='bg-danger';
                    }
                }).error(function(data){
                    console.log(data);
                });
        };

        function getStaff() {}
            $http.get('assets/php/admin.php')
                    .then(
                        function (response) {
                            $scope.obj = response.data;
                        },
                        function (response) {
                            // error handling routine
                        }
                    );
                });

so in debugging i've found that $scope.addstaffform = function() is being executed on the template loading, but its never fired when clicking on the submit button.

Answer 1

 var app = angular.module('myApp', []); app.controller("admController", function ($scope, $http, $location) { $scope.addstaffform = function() { alert("hello"); } }); 

 <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body ng-app="myApp"> <div data-ng-controller="admController"> <div class="page-wrapper"> <div class="banner notdark-translucent-bg" style="background-image:url('assets/images/banner/admin.jpeg'); background-position: 50% 50%;"> <div class="breadcrumb-container"> <div class="container"> <ol class="breadcrumb"> <li class="breadcrumb-item"><i class="fa fa-home pr-2"></i><a class="link-dark" href="home">Home</a></li> <li class="breadcrumb-item active">Administration</li> </ol> </div> </div> </div> <section class="main-container"> <div class="container"> <div class="row"> <div class="main col-lg-8"> <h1 class="page-title">Administration</h1> <div class="separator-2"></div> </div> </div> </div> </section> <div class="container"> <div class="table-responsive"> <table class="table table-striped table-hover"> <thead class="thead-dark"> <tr> <th class="text-center">Name</th> <th class="text-center">Address</th> <th class="text-center">Suburb</th> <th class="text-center">Post Code</th> <th class="text-center">Email</th> <th class="text-center">Phone</th> <th class="text-center"> </th> </tr> </thead> <tbody> <tr class="text-center" data-ng-repeat="o in obj"> <td>{{o.name}}</td> <td>{{o.address}}</td> <td>{{o.suburb}}</td> <td>{{o.postcode}}</td> <td>{{o.email}}</td> <td>{{o.phone}}</td> <td><input type="radio" name="id" id={{o.id}} value={{o.id}}/></td> </tr> </tbody> </table> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">Add Staff</button> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#editModal">Edit Staff</button> <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#deleteModal">Delete User</button> </div> </div> </div> <div class="modal" id="addModal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h5 class="modal-title text-center">Add New Staff</h5> </div> <div class="modal-body"> <form data-ng-submit="addstaffform()" name="addstaff" > <div class="form-group"> <label for="name">Full Name:</label> <input type="text" class="form-control form-control-sm" name="name" id="name" placeholder=""> </div> <div class="form-group"> <label for="address">Address:</label> <input type="text" class="form-control form-control-sm" name="address" id="address" placeholder=""> </div> <div class="form-group"> <label for="suburb">Suburb:</label> <input type="text" class="form-control form-control-sm" name="suburb" id="suburb" placeholder=""> </div> <div class="form-group"> <label for="postcode">Post Code:</label> <input type="tel" class="form-control form-control-sm" name="postcode" id="postcode" placeholder=""> </div> <div class="form-group"> <label for="phone">Phone:</label> <input type="tel" class="form-control form-control-sm" name="phone" id="phone" placeholder=""> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control form-control-sm" name="email" id="email" placeholder=""> </div> <div class="form-group"> <label for="suburb">Password:</label> <input type="password" class="form-control form-control-sm" name="password" id="password" placeholder=""> </div> <button type="submit" class="btn btn-primary" >Submit</button> <button type="reset" value="Reset" class="btn btn-secondry">Clear</button> </form> </div> </div> </div> </div> <div class="modal" id="editModal" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title text-center">Edit Staff</h5> <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>--> </div> <div class="modal-body"> <form ng-submit="submit(editstaffform)" name="editstaff" method="post" action="" role="form"> <div class="form-group"> <label for="name">Full Name:</label> <input type="text" class="form-control form-control-sm" name="name" id="name" placeholder=""> </div> <div class="form-group"> <label for="address">Address:</label> <input type="text" class="form-control form-control-sm" name="address" id="address" placeholder=""> </div> <div class="form-group"> <label for="suburb">Suburb:</label> <input type="text" class="form-control form-control-sm" name="suburb" id="suburb" placeholder=""> </div> <div class="form-group"> <label for="postcode">Post Code:</label> <input type="tel" class="form-control form-control-sm" name="postcode" id="postcode" placeholder=""> </div> <div class="form-group"> <label for="phone">Phone:</label> <input type="tel" class="form-control form-control-sm" name="phone" id="phone" placeholder=""> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control form-control-sm" name="email" id="email" placeholder=""> </div> <div class="form-group"> <label for="suburb">Password:</label> <input type="password" class="form-control form-control-sm" name="password" id="password" placeholder=""> </div> <button type="submit" class="btn btn-primary">Submit</button> <button type="reset" value="Reset" class="btn btn-secondry">Clear</button> </form> </div> </div> </div> </div> <div class="modal" id="deleteModal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </body> </html> 

just change your form name and function name means these should be different or these should be differentiable to each other.This is the only possible solution I get .

Answer 2

Having the form name and function name the same was the problem;

But then i also found another problem with the ajax call ~ due to changes in version 1.6

Old code:

$http({
                    method  : 'POST',
                    url     : 'assets/php/addStaff.php',
                    data    : $.param($scope.formData),  //param method from jQuery
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  //set the headers so angular passing info as form data (not request payload)
                }).success(function(data){
                    console.log(data);
                    if (!data.success) { //success comes from the return json object

                        $scope.result='bg-success';
                    } else {
                        $('#addModal').modal('hide');
                        getStaff();

                        $scope.result='bg-danger';
                    }
                }).error(function(data){
                    console.log(data);
                });

the "success" and "error" callbacks have been deprecated, and replaced with "then" and "catch".
New Code:

$http({
                    method  : 'POST',
                    url     : 'assets/php/addstaff.php',
                    data    : $.param($scope.formData),  //param method from jQuery
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  //set the headers so angular passing info as form data (not request payload)
                }).then(function (response) {
                    console.log(response.data);
                    ans = response.data;
                    if (!ans.success) { //success comes from the return json object

                        $scope.result='bg-success';
                    } else {
                        $('#addModal').modal('hide');
                        getStaff();

                        $scope.result='bg-danger';
                    }
                }).catch(function(response){
                    console.log(response.data);
                });