离子登录按钮在android中不起作用

Question

使用离子服务和 ionic serve --lab 命令在浏览器上运行时按钮正在工作。我可以在Web浏览器中登录并重定向到仪表板。 当我生成.apk文件并在Android设备上运行....登录按钮不起作用。

点击带有用户名和密码的登录按钮，不会重定向到仪表板。

我试过这个参考：Ionic android button not working

但仍未取得成功......请给我任何解决方案。

登录模板

      <li class="item-content">
                  <div class="item-inner">
                    <div class="item-input">
                       <label class="item item-input">
                      <input class="style login3" type="email" name="email" placeholder="E-mail" ng-model="user.email">
                      </label>
                    </div>
                  </div>
                </li>
                <li class="item-content">
                  <div class="item-inner">
                    <div class="item-input">
                       <label class="item item-input">
                      <input class="style login3" type="password" name="password" placeholder="Password" ng-model="user.pwdForLogin">
</label>                   
                      </div>
                      </div>
                      </li>

                       </div>
                         <button ng-click="signIn(user)" >
                      Sign In
                   </button>     

App.js

// State to represent Login View
    .state('login', {
        url: "/login",
        templateUrl: "templates/login.html",
        controller: 'LoginCtrl',
        resolve: {
            // controller will not be loaded until $waitForAuth resolves
            // Auth refers to our $firebaseAuth wrapper in the example above
            "currentAuth": ["Auth",
                function (Auth) {
                    // $waitForAuth returns a promise so the resolve waits for it to complete
                    return Auth.$waitForAuth();
        }]
        }
    })

请帮助我....

Answer 1

在这里，我将向您展示一个有效的示例，您可以将其用于代码。

我的自定义CSS

    .bgLogin{
  width: 100%;
  background-image: url("http://static.vecteezy.com/system/resources/previews/000/084/251/original/christmas-bokeh-vector-background.jpg");
  background-size: 100% 100% !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.login-content
{
  margin-top:8%;
  padding:0px 10px 0px 10px;
}
.login-content .login-form
{
  margin-top:40%;
}

查看/ HTML

    <ion-view class="bgLogin" name="login-view">
  <ion-nav-bar>
    <ion-nav-back-button></ion-nav-back-button>
  </ion-nav-bar>
  <ion-content class="login-content">
    <div class="login-form">
      <label class="item item-input">
        <input type="text" placeholder="Username" ng-model="data.username">
      </label>
      <label class="item item-input">
        <input type="password" placeholder="Password" ng-model="data.password">
      </label>
    </div>
    <button class="button button-block login-button" ng-click="login()">Login</button>
  </ion-content>
</ion-view>

<强> App.js 假设您添加了对控制器和服务的引用

var appStarter = angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']);

定义状态

.state('login', {
  url: '/login',
  templateUrl: 'templates/login.html',
  controller: 'LoginCtrl'
})

登录控制器

    appControllers.controller('LoginCtrl', function($scope, $rootScope, LoginService, $ionicPopup, $state, $ionicHistory) {
    $scope.data = {};

    $scope.login = function() {
      LoginService.loginUser($scope.data.username, $scope.data.password).success(function(data) {
        $rootScope.userName = $scope.data.username.toUpperCase();
        $ionicHistory.nextViewOptions({
          disableBack: true
        });
        $state.go('app.welcome');
      }).error(function(data) {
        var alertPopup = $ionicPopup.alert({
          title: 'Login failed!',
          template: 'Please check your credentials!',
            buttons: [
                {
                    text: 'Ok',
                    type: 'orange-btn'
                }
            ]
        });
      });
    }
  });

登录服务

    .service('LoginService', function($q) {
    return {
      loginUser: function(name, pw) {
        var deferred = $q.defer();
        var promise = deferred.promise;

        if (name.toLowerCase() == 'ens' && pw == 'ens' || name.toLowerCase() == 'adam' && pw == 'adam'|| name.toLowerCase() == 'illum' && pw == 'illum'|| name.toLowerCase() == 'test' && pw == 'test') {
          deferred.resolve('Welcome ' + name + '!');
        } else {
          deferred.reject('Wrong credentials.');
        }
        promise.success = function(fn) {
          promise.then(fn);
          return promise;
        }
        promise.error = function(fn) {
          promise.then(null, fn);
          return promise;
        }
        return promise;
      }
    }
  });