注册页面无法以离子形式打开

时间:2016-07-12 06:16:08

标签: angularjs ionic-framework

拥有一个login.html,SignUp Button点击它时不会打开signup.html页面

的index.html

<body ng-app="starter" ng-controller="AppCtrl">
    <ion-nav-bar class="bar-calm">
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
</body>

的login.html

<ion-view view-title="Sign-In" name="login-view">
    <ion-content class="padding">
     <button class="button button-block button-positive" ng-click="signup()">SignUp</button>
    </ion-content>
</ion-view>

app.js

    angular.module('starter', ['ionic', 'ngMockE2E','ui.router'])
    .run(function ($ionicPlatform) {
        $ionicPlatform.ready(function () {
            if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                cordova.plugins.Keyboard.disableScroll(true);
            }
            if (window.StatusBar) {
                StatusBar.styleDefault();
            }
        });
    })

    .config(function ($stateProvider, $urlRouterProvider, USER_ROLES) {
        $stateProvider

  .state('login', {
        url: '/login',
        templateUrl: 'templates/login.html',
        controller: 'LoginCtrl'
    })
        .state('signup', {
            url: '/signup',
            templateUrl: 'templates/signup.html',
            controller: 'SignupCtrl'
        })
      $urlRouterProvider.otherwise('/login');
    })

controller.js

.controller('AppCtrl', function ($scope, $state, $ionicPopup, AuthService, AUTH_EVENTS) {
    $scope.username = AuthService.username();

    $scope.$on(AUTH_EVENTS.notAuthorized, function (event) {
        var alertPopup = $ionicPopup.alert({
            title: 'Unauthorized!',
            template: 'You are not allowed to access this resource.'
        });
    });

    $scope.$on(AUTH_EVENTS.notAuthenticated, function (event) {
        AuthService.logout();
        $state.go('login');
        var alertPopup = $ionicPopup.alert({
            title: 'Session Lost!',
            template: 'Sorry, You have to login again.'
        });
    });

    $scope.setCurrentUsername = function (name) {
        $scope.username = name;
    };
})

        .controller("SignupCtrl", function ($scope, $state, $ionicPopup, AuthService) {
                $scope.data = {};
                $scope.signup = function () {
                    $state.go('singup');
                };
            })

    .controller('LoginCtrl', function ($scope, $state, $ionicPopup, AuthService) {
        $scope.data = {};

        $scope.login = function (data) {
            AuthService.login(data.username, data.password).then(function (authenticated) {
                $state.go('main.dash', {}, { reload: true });
                $scope.setCurrentUsername(data.username);
            }
        };
    })

并且templates folder内部有signup.html

<ion-view view-title="Signup" name="Signup-view">
    <ion-content padding="true" class="has-header">
      <form id="signup-form2" class="list ">

    // sign up fields goes here.....

     <a ui-sref="login" id="signup-button5" style="border-radius:15px 15px 15px 15px;" class="button button-calm button-block" ng-click="signupEmail(data)">Sign up</a>
       </form>
     </ion-content>
 </ion-view>

1 个答案:

答案 0 :(得分:1)

我认为您错过了LoginCtrl中的状态更改功能。所以你应该在LoginCtrl中声明它,因为该控制器在login.html中使用。

.controller("LoginCtrl", function ($scope, $state) {
  $scope.signup = function () {
    $state.go('signup');
  };
})

另请注意,在您的示例代码中,$state.go函数中存在拼写错误。您的州名称为singup时应为signup