无法在按钮单击时打开新页面

时间:2016-07-07 06:31:03

标签: ionic-framework

使用Ionic Framework开发移动应用程序。 我知道它的基本问题,但我是新手。 在yum install openssl-devel 中有两个按钮1用于Index.html,另一个用于Login

enter image description here

的index.html

SignUp

登录时点击它打开 <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/directives.js"></script> <script src="js/services.js"></script> <script src="js/routes.js"></script> </head> <body ng-app="starter" ng-controller="MainCtrl"> <ion-pane> <div class="bar bar-header bar-calm"> <h1 class="title">Heading</h1> </div> <ion-content paging="true" class="has-header" > <div> <img src="img/Logo.jpg" width="100%" height="auto" style="display:block;margin-left:auto;margin-right:auto;" /> <img src="img/Team.jpg" width="70%" height="auto" style="display:block;margin-left:auto;margin-right:auto;" /> </div> <div ng-cntroller="loginCtrl"> <button id="btnLogin" class="icon icon-right ion-log-in left button button-positive button-block " style="border-radius:15px 15px 15px 15px;" ng-click="login()">Login</button> </div> <div ng-cntroller="signupCtrl"> <button id="btnSignUp" class="button button-positive button-block icon icon-right ion-person left" style="border-radius:15px 15px 15px 15px;">SignUp</button> </div> <div class="bar bar-footer bar-calm"> <div class="title">Copyright <strong>@</strong></label> </div> </ion-content> </ion-pane> 页面,点击注册打开Login.html

app.js

Signup.html

routes.js

angular.module('starter', ['ionic','starter.controllers','starter.routes','starter.services','starter.directives'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(cordova.platformId === 'ios' && 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();
    }
  });
})

controllers.js

var app = angular.module('starter', [])

app.config(function($stateProvider,$urlRouteProvider){
    $stateProvider

    .state('text', {
        url: '/page1',
        templateUrl: 'templates/text.html',
        controller: 'textCtrl'
    });

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

     .state('signUp', {
         url: '/page3',
         templateUrl: 'templates/signup.html',
         controller: 'signupCtrl'
     });

    .state('chats', {
        url: '/page4',
        templateUrl: 'templates/chats.html',
        controller: 'chatsCtrl'
    });

    $urlRouteProvider.otherwise('/page1')
});

的login.html

var app = angular.module('starter')
app.controller('textCtrl',function($scope){

});


app.controller('loginCtrl', function ($scope) {
$scope.login = function(){
alert("Hi")};

});

app.controller('signUpCtrl', function ($scope) {

});

app.controller('chatsCtrl', function ($scope) {

});

2 个答案:

答案 0 :(得分:0)

您需要定义登录按钮应该执行的操作。两种方法

要么

<button id="btnLogin" ui-sref="login">Login</button>

或者按下按钮(例如

)来执行此操作
$scope.login = function(){
 $state.go('login');
};

确保将$ state注入您的控制器。

答案 1 :(得分:0)