AngularJS ng-submit函數未執行
[英]AngularJS ng-submit function not being executed
問題描述
我正在開發一個AngularJS項目，並且我有一個顯示用戶表的模板，然后有一個按鈕（引發模式形式）以添加新用戶。
該表顯示正常，單擊按鈕后會出現模式表單，但是單擊提交功能時永遠不會觸發與表單綁定的提交功能。 這是模板的圖像...
然后，用戶單擊“添加人員”，這將引發模式...
在用戶填寫表格后，便永遠不會觸發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">×</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">×</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()正在模板加載時執行，但是在單擊$scope.addstaffform = function()按鈕時從未觸發過。
2 個解決方案
解決方案1
1 已采納 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">×</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">×</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>
只需更改您的表單名和函數名就意味着它們應該不同或彼此可以區分。這是我得到的唯一解決方案。
解決方案2
0 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);
});
ng-submit未執行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.