【发布时间】:2016-05-11 13:57:38
【问题描述】:
我正在创建一个简单的“电话簿”测试应用程序,并在尝试将用户导航到新页面时遇到问题,并在单击 ion-item 和 ion-list 时遇到问题。
简要概述我要完成的工作:
我有一个包含用户信息(姓名、电话号码等)的 SQLite 数据库
我创建了一个离子列表来显示所有用户。当用户被点击时,它必须将用户引导到一个新页面,该页面将对所有用户的信息进行更深入的描述。从“主页”页面转到“详细信息”页面是我的问题所在。单击包含用户信息的“简短描述”的 ion-item 时不会引发错误。
在我的 app.js 文件中,我有以下配置:
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: "/home",
templateUrl: "index.html",
controller: "HomeCtrl"
})
$stateProvider.state('detail', {
url: "/detail",
templateUrl: "dummy.html",
controller: "DetailCtrl"
})
$urlRouterProvider.otherwise("/home");
})
.controller('HomeCtrl', function($scope, $state) {
$scope.changeState = function () {
console.log("home");
$state.go('home');
}
})
.controller('DetailCtrl', function($scope, $state) {
$scope.changeState = function () {
console.log("detail");
$state.go('detail');
}
})
在我的 index.html 中,我有以下正文:
<ion-nav-view name="home" ui-sref="home">
<ion-pane>
<ion-header-bar class="bar-assertive">
<h1 class="title">Contacts</h1>
</ion-header-bar>
<ion-content class="scroll-content" ng-controller="HomeScreenController" padding="true">
<ion-list>
<ion-item
class="ion-item-content"
ng-repeat="employee in allEmployeeInformation | orderBy:'lastName'"
ng-controller="DetailCtrl"
ng-click="changeState()">
<div class="item-icon-left">
<i class="icon ion-person"></i>
<h3>{{employee.userCN}}</h3>
<h5>{{employee.title}}</h5>
<h6>{{employee.town}}</h6>
</div>
<div class="item-icon-right">
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</ion-nav-view>
这并不适用,但只是为了尽可能彻底,我目前只是在“详细信息”页面使用填充物,直到我得到这个工作。这包含以下内容:
<body ng-app="starter">
<ion-nav-view name="detail" ui-sref="detail">
<h1>John Doe</h1>
<p>Developer</p>
</ion-nav-view>
什么会导致对 ion-item 的点击(看起来)不执行任何操作?我错过了什么让用户能够单击 ion-item 导航到“详细”HTML 页面?
我可以提供任何需要的进一步信息。我现在不知道如何继续。
提前感谢各位的帮助。
干杯,
-迈克
【问题讨论】:
标签: html angularjs routing ionic-framework