【问题标题】:Route user to another HTML page using $state.go in Ionic在 Ionic 中使用 $state.go 将用户路由到另一个 HTML 页面
【发布时间】: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


    【解决方案1】:

    @Michael 我正在开发使用 $state.go() 处理路由的 ionic 应用程序

    1. 在控制器中注入 $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 状态。其中 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中创建2个html页面

    我希望它能解决你的错误。

    【讨论】:

    • 嗨@Vaibhav,感谢您的回复。除非我误解了......“.controller('HomeCtrl', function($scope, $state)" 应该将 $state 服务注入我的控制器。这是正确的吗?
    • 您正在正确地注入 $state 服务。我建议您先创建选项卡项目并根据您的要求对其进行编辑并检查您是否能够重定向。
    • 我可以使用 返回列表 重定向到其他视图
    • 我原本认为 tab 项目会是一个很好的起点,但是我们请求该应用程序的业主只想要一个页面。我会看看这个选项并报告我的结果。
    猜你喜欢
    • 2019-04-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-08-17
    • 2020-07-20
    • 2013-08-05
    相关资源
    最近更新 更多