按钮单击(Ionic)重定向到AngularJS中的另一个HTML页面

时间:2016-04-03 20:50:40

标签: html angularjs ionic-framework

我正在尝试通过点击index.html中的按钮重定向到home.html

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 href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/home.js"></script>
</head> 
<body ng-app="starter">
<ion-pane>
  <ion-header-bar class="bar-royal">
    <h1 class="title">Index</h1>
  </ion-header-bar>
  <ion-content>
      <div ng-controller="LoginCtrl">
          <button ng-click="login()">Login</button>
      </div>
  </ion-content>
</ion-pane>
</body>
</html>

home.js

var VLogin = angular.module('starter', ['ionic']);
VLogin.controller('LoginCtrl', ['$scope','$location', function($scope, $location) {

$scope.login = function(){  
$location.path("#/home.html");
};
}]);

这是两个文件enter image description here的层次结构 $ location.path()不起作用。我哪里错了? TIA。

1 个答案:

答案 0 :(得分:0)

看看这里:http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/

但简单的答案是你应该设置路线

$stateProvider.state('app', {
  url: '',
  templateUrl: 'app.html',
  controller: 'AppCtrl'
  }
}).state('login', {
  url: '/login',
  templateUrl: 'login.html',
  controller: 'LoginCtrl'
  }
})

然后我建议使用$state提供程序来执行此类操作

login.controller('LoginCtrl', function($scope, $state) {
  $state.go('app',{});
})

这不是精确的代码,但概述,我建议阅读提供的其他信息链接