0
私は最初のイオン性のアプリケーションに取り組んでいて、それがなぜ機能しないのかについて本当に混乱しています。そのシンプルなログインフォーム。ユーザーが電子メールとパスワードを入力すると、それを検証してホームページに移動し、ユーザーがサインアップをクリックすると、サインアップページに移動すると考えられます。残念なことに私のことは何もしません。ボタンをクリックしても何の効果もありません。また、コントローラーを追加すると、前に出ていたページ「歓迎」のタイトルも消えました。私は何が間違っているのか分かりません。どんな助けでも本当に感謝しています。ありがとう！コントローラはイオン性のアプリケーションに影響しません
index.htmlを
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="test">
<ion-pane>
<ion-nav-bar class="bar-stable">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
</body>
</html>
のwelcome.html
<ion-view title="Welcome" style="">
<ion-content padding="true" class="has-header">
<form name="loginForm" class="list" novalidate>
<label class="item item-input">
<input placeholder="Email" name="email" type="email" ng-model="email" required>
</label>
<p ng-show="e" name="errorE" ng-bind="errorE"></p>
<label class="item item-input" name="password">
<input placeholder="Password" type="password" name="password" ng-model="password" required>
</label>
<p ng-show="p" name="errorP" ng-bind="errorP"></p>
<button class="button button-positive button-block" ng-click="login(loginForm)">Login</button>
<p>Dont't have an account?</p>
<button class="button button-positive button-block" ng-click="register()">Sign up!</button>
</form>
</ion-content>
</ion-view>
app.js
angular.module('test', ['ionic', 'test.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('welcome', {
url: '/welcome',
templateUrl: 'template/welcome.html',
controller: 'WelcomeController'
})
.state('register', {
url: '/register',
templateUrl: 'template/register.html'
//, controller: 'RegisterController'
})
.state('home', {
url: '/home',
templateUrl: 'template/home.html'
//,controller: 'HomeController'
});
$urlRouterProvider.otherwise('/welcome');
});
controllers.js
angular.module('test.controllers', [])
.controller('welcomeController', function ($scope) {
$scope.email = '';
$scope.password = '';
$scope.errorE="";
$scope.errorP="";
$scope.errorM1="Email not valid";
$scope.errorM2="Password required";
$scope.e=false;
$scope.p=false;
$scope.login=function(form)
{
if(form.$valid)
{
$scope.errorP="perfect";
$scope.errorE="perfect";
$scope.e=true;
$scope.p=true;
$state.go('home');
}
else
{
if(form.email.$invalid || form.email.$pristine)
{
$scope.errorE=$scope.errorM1;
$scope.e=true;
}
else
{
$scope.e=false;
}
if(form.password.$invalid || form.password.$pristine)
{
$scope.errorP=$scope.errorM2;
$scope.p=true;
}
else
{
$scope.p=false;
}
}
}
$scope.register = function() {
$state.go('register');
}
});
ありがとうございます！それはそれを固定！ – Csbk
私はお手伝いします。 –