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.
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.
-
I have tried ng-click, ui-sref and ng-href. All same.
-
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