Verwenden des eckigen ui-Routers zum Navigieren von ionischen Fußzeilen

Question

Ich bin neu in den Konzepten von ionic und angularjs, also habe ich ein grundlegendes Layout erstellt, um zu Seiten aus ionischen Fußzeilen zu navigieren. Ich kann nicht navigieren, obwohl alles in meinem Code in Ordnung zu sein scheint. Kann mir jemand helfen?

Indexdatei:

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

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

Fußzeile

Wie Sie sehen können, habe ich im Index sowie die Fußzeile Vorlage 'Ion-nav-view' Tag enthalten .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

Ändern Sie Ihr Zustand

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

und stellen Sie sicher, dass die folgenden thins

• Sie r HTML-Datei sollte in den Einstellungen Ordner sein und sein Name sollte

Definitiv settings.view.html sein, es wird funktionieren ...

Answer 2

Dies sollte helfen. Es ist kein einfaches Beispiel, aber OK.

Sie können diese

in Ihrem footerCtrl rufen

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