AngularJS 表格不工作，$scope.submit。未定义的错误
AngularJS Form is not working, $scope.submit. undefined error
我有一个简单的 angularJS 应用程序，它有模块、控制器、服务和指令；连同包含表单变量和结构的模板 html 页面，并使用工作正常的指令在主 html 页面 index.page 内打印。现在我在表单中有 ng-submit="submitForm() 但当我按下提交时我看不到任何数据；在 firefox firebug 中它说未定义 $scope.submitForm.Employee
详情如下;
Error: $scope.submitForm.employee is undefined
efController/$scope.submitForm@http://localhost:59662/App/EmployeeForm /efController.js:17:13
anonymous/fn@http://localhost:59662/Scripts/angular.min.js line 213 > Function:2:218
Ic[b]</<.compile/</</e@http://localhost:59662/Scripts/angular.min.js:254:74
lf/this.$get</r.prototype.$eval@http://localhost:59662/Scripts/angular.min.js:133:309
lf/this.$get</r.prototype.$apply@http://localhost:59662/Scripts/angular.min.js:134:12
Ic[b]</<.compile/</<@http://localhost:59662/Scripts/angular.min.js:254:124
If@http://localhost:59662/Scripts/angular.min.js:35:365
Hf/d@http://localhost:59662/Scripts/angular.min.js:35:314
AngularFormsApp.js（模块）
var angularFormsModule = angular.module('angularFormsApp', []);
efController.js（控制器）
angularFormsModule.controller('efController',
function efController($scope, efService) {
$scope.employee = efService.employee;
$scope.departments = [
"Engineering",
"Marketing",
"Finance",
"Admin",
"IT"
];
$scope.submitForm = function () {
????????????????????
}
});
efService.js（服务）
angularFormsModule.factory('efService',
function efService() {
return {
employee: {
fullName: "Khurram Zahid",
notes: "The top employee",
department: "IT",
perkCar: true,
perkStock: false,
perkSixWeeks: true,
payrollType: "none"
}
}
});
efDirective.js（指令）
angularFormsModule.directive('employeeForm',
function () {
return {
restrict: 'E',
templateUrl: 'App/EmployeeForm/efTemplate.html'
}
});
efTemplate.html（表格）
<form class="form-horizontal" role ="form" ng-submit="submitForm()">
<div class="form-group">
<label for="fullName" >Name</label>
<input type="text" id="fullName" name="fullName" class="form-control" ng-model="employee.fullName" />
</div>
<div class="form-group">
<label for="notes">Notes</label>
<textarea name="notes" id="notes" class="form-control" rows="5" cols="50" ng-model="employee.notes"></textarea>
</div>
<div class="form-group">
<label for="department">Department</label>
<select name="department" id="department" class="form-control" ng-model="employee.department" ng-options="dept for dept in departments"> </select>
</div>
<br />
<span><b>Perks</b></span>
<div class="checkbox">
<label><input type="checkbox" value="perkCar" ng-model="employee.perkCar"/>Company Car</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perkStock" ng-model="employee.perkStock"/>Stock</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perkSixWeeks" ng-model="employee.perkSixWeeks"/>Six Weeks Leave</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="payrollType" value="W-2" ng-model="employee.payrollType"> W-2</label><br>
<label><input type="radio" name="payrollType" value="1099" ng-model="employee.payrollType"> 1099</label><br>
<label><input type="radio" name="payrollType" value="none" ng-model="employee.payrollType"> None</label>
</div>
<br/><br />
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit" />
</div>
主要 HTML 页面 (index.html)
<!DOCTYPE html>
<html ng-app="angularFormsApp">
<head>
<title>Angular Form</title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="App/AngularFormsApp.js"></script>
<script src="App/EmployeeForm/efController.js"></script>
<script src="App/EmployeeForm/efDirective.js"></script>
<script src="App/EmployeeForm/efService.js"></script>
</head>
<body class="container">
<h1>Test AngularJS App Approach</h1>
<div ng-controller="efController" >
<employee-form />
</div>
以上代码正确显示了在 efService 中为员工定义的所有数据
正如其中一条评论中提到的，您无法获取函数本身的属性：
$scope.submitForm.employee - 不会工作，因为 $scope.submitForm 是一个函数
您可以做什么，访问您的表单 'FormController'。您需要为表单命名 name="employeeData" 并为每个输入命名 name="perkStock"
然后在'efController'中可以访问'employeeData'对象，也就是'FormController'。这个对象有很多有用的属性：$valid, $dirty , etc. + 每个输入的名字，都有自己的属性：$viewValue, $modelValue, etc.
或者您可以只使用 $scope.employee，因为通过 ng-model="employee.perkStock" 有两种绑定方式 - 我们对每个输入都有这种绑定方式
这里正在 Plunk 使用您的代码。
从控制器打印我们的表单数据：
$scope.submitForm = function (employeeData) {
console.log('Printing "FormController" object, which is accesible through $scope, or might be passed as submit function parametr.')
console.log(employeeData);
console.log($scope.employeeData);
console.log('Printing employee object, which is binded through ng-model ')
console.log($scope.employee)
}
我有一个简单的 angularJS 应用程序，它有模块、控制器、服务和指令；连同包含表单变量和结构的模板 html 页面，并使用工作正常的指令在主 html 页面 index.page 内打印。现在我在表单中有 ng-submit="submitForm() 但当我按下提交时我看不到任何数据；在 firefox firebug 中它说未定义 $scope.submitForm.Employee
详情如下;
Error: $scope.submitForm.employee is undefined
efController/$scope.submitForm@http://localhost:59662/App/EmployeeForm /efController.js:17:13
anonymous/fn@http://localhost:59662/Scripts/angular.min.js line 213 > Function:2:218
Ic[b]</<.compile/</</e@http://localhost:59662/Scripts/angular.min.js:254:74
lf/this.$get</r.prototype.$eval@http://localhost:59662/Scripts/angular.min.js:133:309
lf/this.$get</r.prototype.$apply@http://localhost:59662/Scripts/angular.min.js:134:12
Ic[b]</<.compile/</<@http://localhost:59662/Scripts/angular.min.js:254:124
If@http://localhost:59662/Scripts/angular.min.js:35:365
Hf/d@http://localhost:59662/Scripts/angular.min.js:35:314
AngularFormsApp.js（模块）
var angularFormsModule = angular.module('angularFormsApp', []);
efController.js（控制器）
angularFormsModule.controller('efController',
function efController($scope, efService) {
$scope.employee = efService.employee;
$scope.departments = [
"Engineering",
"Marketing",
"Finance",
"Admin",
"IT"
];
$scope.submitForm = function () {
????????????????????
}
});
efService.js（服务）
angularFormsModule.factory('efService',
function efService() {
return {
employee: {
fullName: "Khurram Zahid",
notes: "The top employee",
department: "IT",
perkCar: true,
perkStock: false,
perkSixWeeks: true,
payrollType: "none"
}
}
});
efDirective.js（指令）
angularFormsModule.directive('employeeForm',
function () {
return {
restrict: 'E',
templateUrl: 'App/EmployeeForm/efTemplate.html'
}
});
efTemplate.html（表格）
<form class="form-horizontal" role ="form" ng-submit="submitForm()">
<div class="form-group">
<label for="fullName" >Name</label>
<input type="text" id="fullName" name="fullName" class="form-control" ng-model="employee.fullName" />
</div>
<div class="form-group">
<label for="notes">Notes</label>
<textarea name="notes" id="notes" class="form-control" rows="5" cols="50" ng-model="employee.notes"></textarea>
</div>
<div class="form-group">
<label for="department">Department</label>
<select name="department" id="department" class="form-control" ng-model="employee.department" ng-options="dept for dept in departments"> </select>
</div>
<br />
<span><b>Perks</b></span>
<div class="checkbox">
<label><input type="checkbox" value="perkCar" ng-model="employee.perkCar"/>Company Car</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perkStock" ng-model="employee.perkStock"/>Stock</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perkSixWeeks" ng-model="employee.perkSixWeeks"/>Six Weeks Leave</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="payrollType" value="W-2" ng-model="employee.payrollType"> W-2</label><br>
<label><input type="radio" name="payrollType" value="1099" ng-model="employee.payrollType"> 1099</label><br>
<label><input type="radio" name="payrollType" value="none" ng-model="employee.payrollType"> None</label>
</div>
<br/><br />
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit" />
</div>
主要 HTML 页面 (index.html)
<!DOCTYPE html>
<html ng-app="angularFormsApp">
<head>
<title>Angular Form</title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="App/AngularFormsApp.js"></script>
<script src="App/EmployeeForm/efController.js"></script>
<script src="App/EmployeeForm/efDirective.js"></script>
<script src="App/EmployeeForm/efService.js"></script>
</head>
<body class="container">
<h1>Test AngularJS App Approach</h1>
<div ng-controller="efController" >
<employee-form />
</div>
以上代码正确显示了在 efService 中为员工定义的所有数据
正如其中一条评论中提到的，您无法获取函数本身的属性：
$scope.submitForm.employee - 不会工作，因为 $scope.submitForm 是一个函数
您可以做什么，访问您的表单 'FormController'。您需要为表单命名 name="employeeData" 并为每个输入命名 name="perkStock"
然后在'efController'中可以访问'employeeData'对象，也就是'FormController'。这个对象有很多有用的属性：$valid, $dirty , etc. + 每个输入的名字，都有自己的属性：$viewValue, $modelValue, etc.
或者您可以只使用 $scope.employee，因为通过 ng-model="employee.perkStock" 有两种绑定方式 - 我们对每个输入都有这种绑定方式
这里正在 Plunk 使用您的代码。
从控制器打印我们的表单数据：
$scope.submitForm = function (employeeData) {
console.log('Printing "FormController" object, which is accesible through $scope, or might be passed as submit function parametr.')
console.log(employeeData);
console.log($scope.employeeData);
console.log('Printing employee object, which is binded through ng-model ')
console.log($scope.employee)
}