Я не нашел случай, похожий на мой, но я просто изучаю AngularJS, поэтому я, вероятно, его не хватает. Просто похлопайте меня по голове и укажите мне в правильном направлении, если это уже вопрос. В любом случае...
Я сделал форму "Добавить пользователя" для сайта изучения работы, над которым я работаю, и использовал AngularJS для этого. Когда он находит модуль, он работает плавно. К сожалению, он находит это, возможно, один из 5 раз. 3 из 5 раз, я ничего не понимаю в консоли. 1 из 5 раз, однако, я получаю ошибку AngularJS.
Failed to instantiate module addUser due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.4.1/$injector/nomod?p0=addUser
at Error (native)
at http://localhost/kushal/html/body/angular.min.js:6:416
at http://localhost/kushal/html/body/angular.min.js:23:433
at a (http://localhost/kushal/html/body/angular.min.js:22:483)
at Q.bootstrap (http://localhost/kushal/html/body/angular.min.js:23:218)
at http://localhost/kushal/html/body/angular.min.js:37:314
at n (http://localhost/kushal/html/body/angular.min.js:7:322)
at g (http://localhost/kushal/html/body/angular.min.js:37:92)
at db (http://localhost/kushal/html/body/angular.min.js:40:367)
at d (http://localhost/kushal/html/body/angular.min.js:19:219
Я читал, что, возможно, я использую свойство в своем модуле, которое не поддерживается, но я не знаю, что бы это было. Мой файл add_user.js выглядит следующим образом:
$(document).ready(function() {
(function() {
var AddApp = angular.module('addUser', ['ngSanitize']);
AddApp.controller('AddUserController', ['$http', '$scope', function($http, $scope){
$scope.SchoolSelBox = null;
$scope.schoolList = [];
$scope.CitySelBox = null;
$scope.cityList = [];
$scope.StateSelBox = null;
$scope.stateList = [];
$scope.TypeSelBox = null;
$scope.typeList = [];
$scope.master = {};
var original = $scope.user;
$http.post("lib/scripts/adding_user.php", {switch_id: '1', func: 'retrieve_schools'}).
success(function(data) {
$scope.schoolList = data;
console.log(data);
}).
error(function(data, status, headers, config) {
console.log(data, status, headers, config);
});
$http.post("lib/scripts/adding_user.php", {switch_id: '1', func: 'retrieve_cities'}).
success(function(data) {
$scope.cityList = data;
}).
error(function(data, status, headers, config) {
console.log(data, status, headers, config);
});
$http.post("lib/scripts/adding_user.php", {switch_id: '1', func: 'retrieve_states'}).
success(function(data) {
$scope.stateList = data;
}).
error(function(data, status, headers, config) {
console.log(data, status, headers, config);
});
$http.post("lib/scripts/adding_user.php", {switch_id: '1', func: 'retrieve_account_types'}).
success(function(data) {
$scope.typeList = data;
}).
error(function(data, status, headers, config) {
console.log(data, status, headers, config);
});
$scope.addUser = function(user) {
$scope.master = angular.copy(user);
console.log($scope.master);
$http.post("lib/scripts/adding_user.php", {
switch_id: '1',
func: 'authenticate_user',
username: $scope.master.username,
email: $scope.master.email,
first: $scope.master.FName,
last: $scope.master.LName,
school: $scope.master.SchoolSelBox['school_id'],
city: $scope.master.CitySelBox['city_id'],
state: $scope.master.StateSelBox['state_id'],
account_type: $scope.master.TypeSelBox['security_level_id']
}).
success(function(response){
console.log(response);
if (response.length > 1) {
alert('An has error occured. Please contact an administrator at [email protected].'); //An error not caught below
} else {
var responseArray = response.split('');
for (var x = 0; x < responseArray.length; x++) {
switch (responseArray[x]) {
case "1":
$("#username_error").text("Username Already Taken");
break;
case "2":
$("#email_error").text("*");
$("#input_error").css("color", "#FF0000");
$("#input_error").text("An account is already registered for this email");
break;
case "3":
$("#input_error").css("color", "#6d962f");
$("#input_error").text("Account Successfully Added");
$scope.user = angular.copy(original);
$scope.addUserForm.$setPristine();
break;
case "4":
$("#input_error").css("color", "#FF0000");
$("#input_error").text("Account could not be added"); //PHP error
break;
default:
alert("add_user.js, add_user()"); //Not real sure what this does
break;
}
}
}
}).
error(function(data, status, headers, config) {
console.log(data, status, headers, config);
});
};
$scope.resetFrm = function() {
$scope.user = angular.copy(original);
$scope.addUserForm.$setPristine();
$("#username_error").text("");
$("#email_error").text("");
$("#input_error").text("");
};
}]);
})();
});
Я не знаю, нужен ли вам HTML для этого или нет, так что вот add_user.php:
<?php
session_start();
if (($_SESSION['sec_level']) != 4) {
header("Location: permission_error.php");
}
include "lib/header/header.php";
include "lib/linklib.php";
?>
<!DOCTYPE html>
<html ng-app="addUser">
<head>
<title>Add User</title>
<?php
csslib();
jslib();
?>
<script type="text/javascript" src="lib/js/add_user.js"></script>
</head>
<body >
<center><div id="bordercontainer">
<?php
headermenu();
?>
<div id="maincontainer">
<br />
<span class="header headerTextAlignment">Add User</span>
<br />
<center>
<br />
<div id="addusercontainer">
<form name="addUserForm" novalidate ng-controller="AddUserController as addUserCtrl" ng-submit="addUserForm.$valid && addUser(user)">
<!--Checks to see if the form is valid before submission using the $valid form controller. AND statement. ng = Angular JS -->
<div class="row-fluid">
<span class="adduser_heading">Username:</span>
<input type="text" id="username" class="adduser_input" size="35" ng-model="user.username" required ng-pattern="string"/>
<span class="adduser_error" id="username_error"></span>
</div>
<div class="row-fluid">
<span class="adduser_heading">Email:</span>
<input type="email" name="email" id="email" class="adduser_input" size="35" ng-model="user.email" required ng-pattern="string"/>
<span class="adduser_error" id="email_error"></span>
</div>
<div class="row-fluid">
<span class="adduser_heading">Confirm Email:</span>
<input type="email" name="email" id="confirm_email" class="adduser_input" size="35" ng-model="user.ConfEmail" required ng-pattern="string"/>
<span class="adduser_error" id="match_error"></span>
</div>
<div class="row-fluid">
<span class="adduser_heading">First Name:</span>
<input type="text" id="first" class="adduser_input" size="35" ng-model="user.FName" required ng-pattern="string"/>
<span class="adduser_error" id="first_error"></span>
</div>
<div class="row-fluid">
<span class="adduser_heading">Last name:</span>
<input type="text" id="last" class="adduser_input" size="35" ng-model="user.LName" required ng-pattern="string"/>
<span class="adduser_error" id="last_error"></span>
</div>
<div class="row-fluid">
<span class="adduser_heading">School:</span>
<select ng-model="user.SchoolSelBox" ng-options="name.school_name for (key, name) in schoolList" id="school" class="adduser_input" style="width: 264px;" required></select>
</div>
<div class="row-fluid">
<span class="adduser_heading">City:</span>
<select ng-model="user.CitySelBox" id="city" class="adduser_input" style="width: 264px;" ng-options="name.city_name for (key, name) in cityList" required></select>
</div>
<div class="row-fluid">
<span class="adduser_heading">States:</span>
<select ng-model="user.StateSelBox" id="state" class="adduser_input" style="width: 264px;" ng-options="name.state_name for (key, name) in stateList" required></select>
</div>
<div class="row-fluid">
<span class="adduser_heading">Account Type:</span>
<select ng-model="user.TypeSelBox" id="account_type" class="adduser_input" style="width: 264px;" ng-options="name.security_level_type for (key, name) in typeList" required></select>
</div>
<div class="row-fluid">
<div class="adduser_button_left">
<button class="btn btn-primary" type="reset" id="reset" value="Reset" >Reset</button>
</div>
<span class="adduser_large_error" id="input_error"></span>
<div class="adduser_button_right">
<button type="submit" class="btn btn-primary" id="submit" value="Submit" >Submit</button>
</div>
</div>
</form>
</div>
<br />
</center>
<!-- Load Modal -->
<div id="loadModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<div class="progress">
<div class="bar" style="width: 0%; " data-percentage="100" ></div>
</div>
<span id="comment"></span>
</div>
</div>
</div>
</div>
</body>
</html>
У меня есть Angular JS и ngSanitize, включенные в этот файл lib/linklib.php. Все эти console.log() есть для обратной связи. JS обращается к исходному коду PHP, который взаимодействует с базой данных. Если вам нужна дополнительная информация, я постараюсь как можно скорее. Просто немного тупик, поскольку, похоже, это происходит в 1/5 раза.
О, это через localhost. У меня есть своя копия кода и базы данных, поэтому я не прохожу через брандмауэр или шлюз или что-то в этом роде для доступа к базе данных. Не знаю, имеет ли это значение, просто бросая его туда.
Благодарю.
Изменение: возможно, следует упомянуть, что происходит, когда оно не работает. HTML загружается просто отлично, но поля выбора не заполняются. Нажатие кнопки "Отправить" и "Сброс" ничего не делает.
Я удалил jQuery $ (document).ready, согласно предложению o4ohel, и он работает плавно и последовательно. Благодарю!