AnglarJS Форма не работает, $scope.submit. неопределенная ошибка

У меня есть простое приложение angularJS, которое получило модуль, контроллер, сервис и директиву; вместе с шаблоном html page, который содержит переменную формы и структуру, и печатает внутри главной html страницы index.page с помощью директивы, которая работает нормально. Теперь у меня есть ng-submit="submitForm() в форме, но я не вижу никаких данных, когда я нажимаю submit; в firefox firefox он говорит undefined $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 для сотрудника.

Источник

1 ответ

Решение

Как упоминалось в одном из комментариев, вы НЕ можете получить свойства самой функции:

$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)
}
Источник
Другие вопросы по тегам