文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJS ng-未执行提交函数

问AngularJS ng-未执行提交函数
EN

Stack Overflow用户

提问于 2018-07-02 07:15:00

回答 2查看 186关注 0票数 0

我正在开发一个AngularJS项目，我有一个模板，它显示一个用户表，然后有一个按钮(它引发一个模式表单)来添加一个新用户。

该表显示得很好，按一下按钮就会引发模态表单，但与表单绑定的submit函数不会在单击submit函数时触发。这是模板的图像..。

然后用户单击"Add“，这会引发模式.

在用户填写表单后，ng-submit函数永远不会被触发。

这是模板的HTML代码；

<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 -->

这是角度控制器

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
                        }
                    );
                });

因此，在调试过程中，我发现$scope.addstaffform = function()是在加载模板时执行的，但它在单击submit按钮时从未触发。

javascript

jquery

html

angularjs

angularjs-controller

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-02 09:19:28

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>

只需更改您的表单名称和函数名，就意味着它们应该是不同的，或者它们对于每个other.This都应该是可区分的，这是我得到的唯一可能的解决方案。

票数 1

Stack Overflow用户

发布于 2018-07-02 16:46:53

形式名称和函数名称相同是问题所在；

但是我也发现了ajax调用的另一个问题--由于版本1.6的变化

旧代码：

$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);
                });

“成功”和“错误”回调已被废弃，代之以“然后”和“捕捉”。

新法典：

$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);
                });

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51130854

复制

相似问题

问AngularJS ng-未执行提交函数
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS ng-未执行提交函数EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS ng-未执行提交函数
EN