Creating A Link to a New Page - Nav Bar disappears


#1

Hey guys,

I’m using the tabs starter template. Within one tab page I am putting a couple links that link to other pages that I have created. I can successfully get to those pages, but the Nav Bar at the top disappears and I do not know why. The page is called “in-progress.html” and I have linked it from my tab page like ‘a href=“templates/in-progress.html”’… Like I said, this gets me to the page, but the Nav Bar is gone and I cannot get back to any other page because my back arrow disappears with the nav bar. Any suggestions?

Thanks in advance!


Load new page/view on button click
#2

Please do not use href-attribute.

Default angular attribute is ng-href="".

But you also can use ui-sref="" from ui-router.

It depends how your pages look like.


#3

Thanks for the advice!

The new page that I am trying to link to gets rid of the “#/tab/…” and replaces it with “templates/page.html” I think that is why the navigation bar at the top of the page disappears. I just do not know how to correctly link the page. I’m trying to study the original “tab-friends.html” and “friend-detail.html” to see how they linked to the new page. I am just stumped :confused:

I appreciate your help though.


#4

You’re using an href to the template itself. Don’t do that. You need to link to the “state” defined in your .config.

Example State:

    .state('tab.dash', {
      url: '/dash',
      views: {
        'tab-dash': {
          templateUrl: 'templates/tab-dash.html',
          controller: 'DashCtrl'
        }
      }
    })

So, your href should be href="#/tab/dash" or better yet as @bengtler suggests: ui-sref="tab.dash"


#5

Thanks a million! It is awesome how helpful you guys are!


#6

Hi @Calendee can you give me link to learn more about this State ? I have same problem to navigate among and between page, thanks


#7

This is the official ui-router docs : http://angular-ui.github.io/ui-router/site/#/api/ui.router
This example shows setting up states. http://codepen.io/ionic/pen/odqCz


#8

you rock! @Calendee thanks a lot…!


#9

thanks solve a problem for me where others didn’t


#10

Hi Calendee, i need your help. I got stuck at a point. I have a html custom page which i have to link the same to a custom like which says View More for about us. I couldn’t link the page properly, styles are not applied. It is just the html which is displayed.

Please suggest me .

Thanks in advance.