CODEWITHSUNDEEP
htmlangularjsionic-framework
Millenial2020
Millenial2020

Reputation: 2931

how to work with ui-view in ionic

I'm using ionic to build a hybrid app and I can't get the ui-view to dynamically show content

this is the index

<body ng-app="starter">
 <ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-nav-view></ion-nav-view>
</ion-pane>
</body>

for my understanding the ion-nav-view work just like the ui-view from angular ui-routing.

this is my app.js

.config(function($stateProvider, $urlRouterProvider){

$stateProvider

.state('login',{
    url: '/',
    template: '<h1>hello</h1>'
})

$urlRouterProvider.otherwise('/');

})

I want the word hello to show when going to the root of the app but is not working. it's not showing anything and is not giving any console error.

Upvotes: 0

Views: 720

Answers (1)

JoeLinux
JoeLinux

Reputation: 4307

I suspect the "hello" is there, but it's getting obscured by the <ion-header-bar>. Try adding "has-header" as a class to the <ion-nav-view> element. That class forces the content to begin 44px lower than usual, to account for the header bar.

Here is a working CodePen. All I did was add that class.

Upvotes: 1

Related Questions