文章/答案/技术大牛

发布

问离子路由，不起作用
EN

Stack Overflow用户

提问于 2014-11-24 03:39:58

回答 2查看 2K关注 0票数 0

我是ionic的新手，我正在尝试开发一个应用程序，我被困在通过tab在页面之间进行路由的工作中……无法理解控件如何进入$stateProvider .state({ ... })并遇到奇怪的问题。

app.js

angular.module('LetsChat', ['ionic'])

...

.config(function($stateProvider,$urlRouterProvider){

$stateProvider

    .state('tab',{
        url:'/tab',
        abstract:true,
        templateUrl:"app/tabs.html"
    })

    .state('tab.contact', {
        url:"/contact",
        views:{
            'tab-contact':{
                templateUrl:"app/contact/contact.html"
            }
        }
    })
    
    .state('chat-list', {
        url:"/chat-list",
        views:{
            'tab-chat-list':{
                templateUrl:"app/chat-list/chat-list.html"
            }
        }
    })

    $urlRouterProvider.otherwise('/tab');
});

Index.html

<body ng-app="LetsChat">

...
<ion-nav-view></ion-nav-view> 
...

tabs.html

<ion-tabs class="tabs-icon-top">


  <!-- contact Tab -->
  <ion-tab title="Contact" icon="icon ion-ios7-person" href="#/tab/contact">
    <ion-nav-view name="tab-contact"></ion-nav-view>
  </ion-tab>


  <!-- chat-list Tab -->
  <ion-tab title="chat list" icon="icon ion-android-forums" href="#/tab/chat-list">
    <ion-nav-view name="tab-chat-list"></ion-nav-view>
  </ion-tab>


</ion-tabs>

contact.html

<ion-view title="contact">
  <ion-content class="padding">
    <h1>contact</h1>
  </ion-content>
</ion-view>

chat-list.html

<ion-view title="chat-list">
  <ion-content class="padding">
    <h1>chat list</h1>
  </ion-content>
</ion-view>

我试了又试，我不明白我哪里错了:点击标签时，它没有进入各自的标签页，而是停留在索引页面，即使我在外部指定了URL，页面留在了索引页面，而标签动画工作了bt也没有执行任何操作。另外，请建议如何使用离子应用程序在浏览器中调试和检查是否正常工作。请帮帮忙。

angularjs

ionic-framework

angular-ui-router

回答 2

Stack Overflow用户

发布于 2016-02-14 01:01:45

尝试从您的uri-s中删除app/ ...例如：'contact/contact.html‘而不是'app/contact/contact.html’

票数 0

Stack Overflow用户

发布于 2014-11-29 22:10:33

也许这会帮助你..。您必须将您的视图名称

tabs.html

<ion-tabs class="tabs-icon-top">
    <!-- contact Tab -->
    <ion-tab title="Contact" icon="icon ion-ios7-person" href="#/tab/contact">
        <ion-nav-view name="tab-contact"></ion-nav-view>
    </ion-tab>
    <!-- chat-list Tab -->
    <ion-tab title="chat list" icon="icon ion-android-forums" href="#/tab/chat-list">
        <ion-nav-view name="tab-chat-list"></ion-nav-view>
    </ion-tab>
</ion-tabs>

contact.html

<ion-view title="tab-contact">
    <ion-content class="padding">
        <h1>contact</h1>
    </ion-content>
</ion-view>

chat-list.html

<ion-view title="tab-chat-list">
    <ion-content class="padding">
        <h1>chat list</h1>
    </ion-content>
</ion-view>

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27093421

复制

相似问题

问离子路由，不起作用
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问离子路由，不起作用EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问离子路由，不起作用
EN