Question

当我最近开始使用“离子”时，我遇到了制作“标签导航”的问题。

我正在按照一个简单的教程，我用两个标签进行了导航，但我无法制作三个标签，它无法正常工作，我担心我不明白这些标签的概念。 / p>

这是我非常棒的代码：

<ion-tabs class="tabs-striped tabs-top tabs-background-dark tabs-color-energized">

        <ion-tab title="help"ui-sref="help">
           <ion-nav-view name="help"></ion-nav-view>
        </ion-tab>

        <ion-tab title="home" ui-sref="home">
            <ion-nav-view name="home"></ion-nav-view> 
        </ion-tab>

     <ion-tab title="contact" ui-sref="contact">
            <ion-nav-view name="contact"></ion-nav-view> 
        </ion-tab>



    </ion-tabs> 
 <script type="text/ng-template" id="home.html">
  <ion-view title="Home">
    <ion-content padding="true">
      <h2>Home Page</h2>
      <p>Here's the main route for the app.</p>
    </ion-content>
  </ion-view>
</script>

<script type="text/ng-template" id="help.html">
  <ion-view title="Help">
    <ion-content padding="true">
       <h2>Using the app</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>

      <script type="text/ng-template" id="contact.html">
  <ion-view title="Contact">
    <ion-content padding="true">
       <h2>Using the app</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>

app.js：

.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/')

$stateProvider
    .state('home', {
  url: '/home',
  views: {
    home: {
      templateUrl: 'home.html'
    }
  }
})

 .state('help', {
  url: '/help',
  views: {
    help: {
      templateUrl: 'help.html'
    }
  }
})

.state('contact', {
  url: '/contact',
  views: {
    help: {
      templateUrl: 'contact.html'
    }
  }
})


})

http://codepen.io/stranger90/pen/MwjGPY

Answer 1

在您contact州的观看中，您仍然可以help作为观点：

.state('contact', {
    url: '/contact',
        views: {
            help: { // <-- Change this to 'contact'
                templateUrl: 'contact.html'
            }
        }
})

Codepen

Answer 2

我会尽力向你解释这项工作的方式。

因此，在您的app.js文件中，您可以获得路由配置。此路由将允许您将URL上的状态与模板（file.html）相关联。参考：Ui-router

在你的html页面中：该指令ui-sref =＆＃34; help＆＃34;会打电话给国家＆＃34;帮助＆＃34;并显示一个页面（templateUrl）。在这种情况下，这将显示help.html的内容

    <ion-tab title="help"ui-sref="help">
       <ion-nav-view name="help"></ion-nav-view>
    </ion-tab>

在这个例子中，每个html页面都在主html页面中：例如：这是help.html页面

    <script type="text/ng-template" id="help.html">
       <ion-view title="Help">
         <ion-content padding="true">
          <h2>Using the app</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
            </ion-content>
       </ion-view>
     </script>

你有一个错误：

 .state('contact', {
  url: '/contact',
   views: {
      contact: { // here it's not help but contact
       templateUrl: 'contact.html'
     }
    }
 })

我希望这能帮助你，对不起，如果我的英语不正确。本教程可以帮助您：Ionic routing tutorial

如何轻松制作离子标签导航

2 个答案: