使用 angular-ui-路由器从离子页脚导航

Question

我对 ionic 和 angularjs 的概念不熟悉，所以我创建了一个基本布局来从 ionic 页脚导航到页面。尽管我的代码中的一切似乎都很好，但我无法导航。有人可以帮我吗？

如您所见，我在索引和页脚模板中包含了 'ion-nav-view' 标签：

索引文件：

  <ion-header-bar class="bar-stable">
      <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>

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

footer.view.html :

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

    <div class="tabs tabs-icon-top">
            <a class="tab-item">
                    <i class="icon ion-home" ui-sref="home"></i>
                        Home
            </a>
            <a class="tab-item">
                    <i class="icon ion-star" ui-sref="favorites"></i>
                        Favorites
            </a>
            <a class="tab-item">
                    <i class="icon ion-gear-a" ui-sref="settings"></i>
                        Settings
            </a>
    </div>

home.view.html

<h1>Home view</h1>

app.js

$stateProvider
  .state('footer', {
      url : '/footer',
      templateUrl : 'footer/footer.view.html'
  })
  .state('footer.home',{
     url : '/home',
     templateUrl : 'home/home.view.html'
  })
  .state('footer.settings',{
     url : '/settings',
     templateUrl : 'settings/settings.view.html'
  })
  .state('footer.favorites',{
    url :'/favorites',
    templateUrl : 'favorites/favorites.view.html'
  });
 
  $urlRouterProvider.otherwise('/footer/home');

Answer 1

这应该有所帮助。这不是简单的例子，但还可以。

您可以在 footerCtrl 中调用它

$('html,body').animate({ scrollTop: $(el).offset().top }, 500);

Answer 2

将您的状态更改为

 .state('settings',{
     url : '/settings',
     templateUrl : 'settings/settings.view.html'
  })

并确保以下变薄

您的 html 文件应位于设置文件夹中，其名称应为 settings.view.html

肯定会有效...

使用 angular-ui-路由器从离子页脚导航

Using the angular-ui-router to navigate from ionic footers

angularjs

angular-ui-router

ionic-framework

ionic-view