使用Ionic中的$ state.go將用戶路由到另一個HTML頁面

Question

我正在創建一個簡單的“電話簿”測試應用程序，並且在單擊離子列表和離子列表中的離子項目時嘗試將用戶導航到新頁面時遇到問題。

簡要概述一下我要完成的工作：

我有一個SQLite數據庫，其中包含用戶信息（姓名，電話號碼等）

我創建了一個離子列表來顯示所有用戶。 單擊用戶時，它必須將用戶定向到一個新頁面，該頁面將更深入地描述所有用戶的信息。 從“主頁”頁面轉到“詳細信息”頁面是我的問題所在。 單擊包含用戶信息的“簡短描述”的離子項目時，不會引發任何錯誤。

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

是什么會導致對離子項目的點擊（看起來沒有）什么都不做？ 我缺少什么使用戶能夠單擊離子項目導航到“詳細” HTML頁面？

我可以提供所需的任何其他信息。 我現在不確定如何繼續。

伙計們，在此先感謝您的幫助。

干杯，

-麥克風

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');

更新-4/2/2016

嘿Michael現在也感謝您的問題，即使我知道Tab項目是如何連接的.. :)

這是工作代碼。 在您的代碼中，您忘記添加抽象狀態，即父狀態。 看到在我的代碼標簽狀態。 其中tab是父狀態，[Parent] tab.home [child]和[Parent] tab.detail [child]狀態。

創建選項卡項目，因此您不必從頭開始創建所有文件。 Tabs項目將允許您創建非常結構化的項目。

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中創建2個html頁面

我希望它可以解決您的錯誤。

使用Ionic中的$ state.go將用戶路由到另一個HTML頁面

問題描述

1 個解決方案

解決方案1
0 2016-02-02 16:51:36

使用Ionic中的$ state.go將用戶路由到另一個HTML頁面

問題描述

1 個解決方案

解決方案1 0 2016-02-02 16:51:36

解決方案1
0 2016-02-02 16:51:36