Question

我正在创建一个简单的电话簿＆＃39;测试应用程序，并在单击离子列表中的离子项目时尝试将用户导航到新页面时遇到问题。

简要介绍一下我要完成的工作：

我有一个SQLite数据库，其中包含用户信息（姓名，电话号码等）

我创建了一个离子列表来显示所有用户。点击用户后，必须将用户引导至新页面，该页面将对所有用户进行更深入的描述。信息。来自＆＃39; home＆＃39;页面到＆＃39;详细信息＆＃39;页面是我的问题所在。点击包含＆＃39;简短说明＆＃39;的离子项时，不会抛出任何错误。用户的信息。

在我的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>

并非这适用，但为了尽可能彻底，我目前只是使用填充物来提供详细信息＆＃39;页面，直到我得到这个工作。其中包含以下内容：

<body ng-app="starter">
  <ion-nav-view name="detail" ui-sref="detail"> 
        <h1>John Doe</h1>
        <p>Developer</p>
 </ion-nav-view>

什么会导致点击离子项（看似什么）没有做任何事情？我缺少什么会让用户点击离子项来导航到＆＃39;详细信息＆＃39; HTML页面？

我可以提供所需的任何进一步信息。我现在还不确定如何继续。

先谢谢你的帮助，伙计们。

干杯，

-Mike

Answer 1

@Michael我正在研究使用$ state.go（）

处理路由的离子应用程序

在控制器中注入$ state服务。

示例App.js

.state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl'
        }
      }
    })

控制器重定向逻辑

$state.go('tab.chats');

更新 - 2016年4月2日

嘿，迈克尔，感谢你的问题，即使我知道标签项目是如何连接的......：）

这是有效的代码。在您的代码中，您忘记添加父状态的抽象状态。请参阅我的代码标签状态。 tab是父状态和[Parent] tab.home [child]和[Parent] tab.detail [child]状态。

创建标签项目，这样您就不必从头开始创建所有文件。选项卡项目将允许您创建非常结构化的项目。

<强> Tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Home Tab -->
  <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

  <!-- Detail Tab -->
  <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/detail">
    <ion-nav-view name="tab-detail"></ion-nav-view>
  </ion-tab>
</ion-tabs>

<强> App.js

// setup an abstract state for the tabs directive
 .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

.state('tab.home', {
    url: '/home',
    views: {
      'tab-home': {
        templateUrl: 'templates/tab-home.html',
        controller: 'HomeCtrl'
      }
    }
  })

  .state('tab.detail', {
    url: '/detail',
    views: {
      'tab-detail': {
        templateUrl: 'templates/tab-detail.html',
        controller: 'DetailCtrl'
      }
    }
  });

<强> Controller.js

.controller('HomeCtrl', function($scope) {})

.controller('DetailCtrl', function($scope) {})

在模板文件夹tab-home.html和tab-detail.html

我希望它可以解决你的错误。

使用Ionic中的$ state.go将用户路由到另一个HTML页面

1 个答案: