angularjs - 离子路由，不工作 - Thinbug

离子路由，不工作

时间：2014-11-23 19:39:58

标签： angularjs ionic-framework angular-ui-router

我是离子的新手，我正在尝试处理一个应用程序而且我一直在通过标签页面之间进行路由...无法理解控件如何进入$ 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页面停留在索引页面中而选项卡动画工作也不会执行任何操作。还请建议如何使用离子应用程序调试和检查浏览器的正常工作。请帮忙。

2 个答案:

答案 0 :(得分：0)

尝试从您的uri-s中删除app / 例如：＆＃39; contact / contact.html＆＃39;而不是＆＃39; app / contact / contact.html＆＃39;

答案 1 :(得分：-1)

可能这会对你有所帮助...... 您必须将您的视图名称设为相同

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>

聊天list.html

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