URL changes but view does not change

This is how I define the href tag.

<ion-item ng-repeat="chapter in chapters" ng-href="#/tab/kurals">
    {{chapter}}
</ion-item>

When I click on the item, the url of the browser changes to /tab/kurals, but there is no change in the view. Still the old view is shown. For ionic tabs, I have an abstract route. All other links works fine.

Below is how I defined my routes.

$stateProvider.state('tab.kural', {
    url: '/kurals',
    views: {
        'tab-kural': {
            templateUrl: 'templates/tab-kural.html',
            controller: 'KuralCtrl'
        }
    }
});

There are no errors in the console.

What could be the possible reasons?

@mhartington : Mr.Expert, any clue on this?

Are you sure that “tab-kural” view is available at the time when you click?

Yes, its available. As shown in the route state, I have defined it and the file is available.

The source code is present at

https://github.com/Purus/Thirukural/

Please someone help on this. Its blocked for almost 10 days without any progress. I am struck. I posted in StackOverFlow too but no luck.

@mhartington @nicraboy @yurinondual @paddycull9

Have you tried using a $state.go() function within your controller instead? So instead of an ng-href, you could use an ng-click, which would call the function which calls state.go.

If you aren’t sure what I mean, I can be more specific, but you may have already tried this method.

Also, do you want every item in the ng-repeat to link to the same page? It seems unusual.

Thanks for your time on this.

  1. I have tried ng-click, ui-sref and ng-href. All same.

  2. For the sake of simplicity I have made the URL same for all list. In actual use, the link has the index value like /mural/2

I have provided my hit hub source. Please try out.

How do you expect to load a template for kural if there is no view with name kural available?

I believe that you have to have that be an abstracted state of sorts. The router is going to look for /kural and /kural/:id as two different things…

.state(‘profile’, {
abstract: true,
url: “/profile”,
templateUrl: “templates/common/content.html”,
})

Then the next state is named something like ‘profile.id’ and the url is ‘/:id’. The router pieces the two together so if I go to profile/1234 it will route me to the /:id state.

It MAY help get you further, I think there is a code pen somewhere on the ionic code pen profile that demonstrates this too.

Just my two cents

@yurinondual

Can you explain what do you mean, please?

I have the view and the template for the kural route.

@NorthMcCormick

I already have a abstract state for hte tab.

Other views are not abstact. The problem is other states work fine and only these does not work.

Well you have this

$stateProvider.state('kural', {
    url: '/kural/:id',
    views: {
        'kural': {
            templateUrl: 'templates/tab-kural.html',
            controller: 'KuralCtrl'
        }
    }
});

But I cannot see view with name kural in your html

In your tabs.html try adding

<ion-tab title="kural" hidden="true">
    <ion-nav-view name="kural"></ion-nav-view>
</ion-tab>

Sorry @yurinondual . I think you have mistaken or I have not understood better.

This view is not a tab. I have only 3 tabs which are already defined. When I click on a link in a tab view, it should lead to another view.

It doesn’t matter, you have to have

<ion-nav-view name="kural"></ion-nav-view>

Since you defined a views: {
‘kural’: {

If you don’t want it to be part of tabs, then place it in index.html

Basically you are saying: when navigating to state ‘kural’ find ion-nav-view name=“kural” in html and load ‘templates/tab-kural.html’ inside of it

Basically this is now making sense to me.

I don’t want to add a new tab for this view. The view should be shown in the existing view tab itself.

So what else I can do now?

I already showed you a way above using a hidden tab

Thanks for your help. I missed that before.

Thanks again a ton times.

Thank you so much… .! This helped me alot