Использование углового ui-router для перехода от ионных нижних колонтитулов

Question

Я новичок в концепциях ионных и угловых, поэтому я создал базовый макет для навигации по страницам с ионных нижних колонтитулов. Я не могу перемещаться, хотя все, что в моем коде, кажется, в порядке. Кто-нибудь может мне помочь?

Как вы можете видеть, я включил 'ион-нав-View' тег в индексе, а также шаблон колонтитула:

индексный файл:

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

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

колонтитула .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

Изменение состояния на

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

и убедитесь, что следующие редеет

• вам г HTML файл должен находиться в папке настроек и ее имя должно быть settings.view.html

Определенно, это будет работать ...

Answer 2

Это должно помочь. Это не простой пример, но ОК.

Вы можете назвать это в footerCtrl

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