Question

我一直在研究我的第一个离子应用程序，我真的很困惑为什么它不起作用。它是一个简单的登录表单。当用户输入电子邮件和密码时，它会假设验证它并带您进入主页，如果用户点击了注册，它就会把你带到注册页面。不幸的是我没有做任何事情，单击按钮没有任何效果，我无法解决原因。此外，当我添加控制器时，之前出现的页面“欢迎”的标题也消失了。我不知道我做错了什么。任何帮助将非常感激。谢谢！

的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');
 }

});

Answer 1

有三个问题

1

ionic.bundle.js已经带来了角度

2＆＃34; WelcomeController＆＃34; angular / javascript区分大小写

3你忘了在＆＃34; WelcomeController＆＃34;

中注入 $ state

控制器不影响离子应用程序

1 个答案: