0
Приведенный ниже код предназначен для отправки пользовательских данных в скрипт python. Однако кнопка отправки или форма ничего не делают. Я тестировал скрипт python без AngularJS, и он отлично работает.AngularJS не работает с обычной формой
После небольшого тестирования я обнаружил, что если я просто удалю ng-приложение, кнопка отправки будет работать, но не какая-либо из материалов AngularJS (вне md-карты). Поэтому я подозреваю, что ng-app может это сделать.
Я также пытаюсь переместить ng-приложение вокруг скрипта, надеясь на что-то, но ничего не изменилось.
К сожалению, я не могу опубликовать скрипт python, поскольку сценарий python не является моей работой.
Я разделил сценарий на 2 части в случае, если это может быть легче прочитать, что путь
Javascript, CSS и прочее
<html lang="en" >
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
<style>
/*Centers the main Login box*/
.completeCard
{
margin-left: auto;
margin-right: auto;
width: 50%;
}
/*Centers the introduction Text*/
.introText
{
text-align: center;
font-family: 'Fira Sans', sans-serif;
}
/*modifies the checkbox*/
.checkbox
{
padding-top: 1em;
font-family: 'Roboto', sans-serif;
}
/*Centers the headline*/
.md-headline
{
text-align: center;
}
</style>
<script language="javascript">
var app = angular.module('signIn',['ngMaterial']);
app.controller('inputController', inputController);
function inputController ($scope,$mdDialog)
{
$scope.project = {
comments: 'Comments',
};
//Creates a pop up when the user clicks the submit button
$scope.showAlert = function(ev)
{
$mdDialog.show
(
$mdDialog.alert()
.parent(angular.element(document.querySelector('#dialogContainer')))
.clickOutsideToClose(true)
//title of the pop up alert box
.title('Thank You!')
//The dialog that comes up on the alert box
.textContent("Test")
.ariaLabel('Thank You')
//The close button for the alert box
.ok('Ok!')
.targetEvent(ev)
);
};
}
</script>
Часть тела
<body ng-app="signIn" ng-controller="inputController">
<div id="title" class="introText">
<h1> Sign-In </h1>
</div>
<div id="inputContainer" class="completeCard" ng-controller="inputController as ctrl" ng-cloak>
<md-content layout-padding>
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Login</span>
<form method="post" name="projectForm">
<md-input-container>
<label>Secret Key</label>
<input required name="secret" type = "text" ng-model="project.secret" value="$${secret}">
<md-tooltip>Written on a board or ask an representative</md-tooltip>
<div ng-messages ="projectForm.secret.$error">
<div ng-message = "required"> This is required </div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Name</label>
<md-tooltip>First and Last Name</md-tooltip>
<input required name="name" type="text" ng-model="project.name" value="$${name}">
<div ng-messages="projectForm.name.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Email</label>
<input required type="email" name="email" ng-model="project.userEmail"
minlength="5" maxlength="100" ng-pattern="/^[email protected]+\..+$/"/value = "$${email}">
<md-tooltip>Please use your School Email</md-tooltip>
<div ng-messages="projectForm.email.$error" role="alert">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your email must be between 5 and 100 characters long and should be a valid email address.
</div>
</div>
</md-input-container>
<md-input-container-select>
<md-tooltip>All Majors are in Alphabetical Order</md-tooltip>
<div>
<md-select ng-model="major" placeholder="Major" class="md-no-underline" name="major" value"$${major}">
<md-option value="n/a">Not a Student</md-option>
<md-option value="major1">Major 1</md-option>
<md-option value="major2">Major 2</md-option>
</md-select>
</div>
</md-input-container-select>
<md-checkbox class="green" name = "add_s" value=$${sec_checked}>
Join Mailing List
</md-checkbox>
<!-- <md-card-actions layout="row" layout-align="end center"> -->
<br>
<input type="submit" value="Submit"/>
<div style="color:red; font-size:20pt"> $${response}</div>
</br>
<!-- <md-button type="submit" class="submitButton" ng-click="showAlert($event)">Submit</md-button> -->
<!-- </md-card-actions> -->
</form>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-lg card-media"></div>
</md-card-title-media>
</md-card-title>
</md-card>
</md-content>
</div>
</body>
</html>
Редактировать
Вот что работает без AngularJS материалов
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign-in</title>
</head>
<body>
<h1>Sign-in</h1>
<form method="post">
Secret key: <input type="text" name="secret" value="$${secret}"/><br/>
Name: <input type="text" name="name" value="$${name}"/><br/>
Email: <input type="text" name="email" value="$${email}"/><br/>
Major: <input type="text" name="major" value="$${major}"/><br/>
<span style='width:300pt; float:left'>Add me to the CCDC team!</span>
<input type="checkbox" name="add_c" $${ccdc_checked}/><br/>
<span style='width:300pt; float:left'>Add me to the Cyber Defense Team mailing list!</span>
<input type="checkbox" name="add_d" $${cdt_checked}/><br/>
<span style='width:300pt; float:left'>Add me to the SIG-Sec mailing list!</span>
<input type="checkbox" name="add_s" $${sec_checked}/><br/>
<input type="submit" value="Submit"/><br/>
<div style="color:red; font-size:20pt">$${response}</div> <br/>
</form>
</body>
</html>
Вы, кажется, не связываете вход 'submit' с' showAlert' или я что-то здесь не вижу? – Searching
У вас кнопка закомментирована. –
@AdrianBrand Я прокомментировал кнопку AngularJS Materials, так как она не работала и заменила ее обычной кнопкой отправки ol ', надеясь, что это сработает .... это не было –