4

I've been trying to make this work, I think I'm missing something but I don't know what. I've tried with absolute paths and same problem. Perhaps the way I'm trying to link the states?

Tree view goes like this:

- app - app.category - app.category.category-detail

I can navigate from app, to app.category but I can't go any further, here are my routes:

 .state('app.category', { url: "/category?catId", views: { 'menuContent': { templateUrl: "templates/category.html", controller: "CategoryCtrl", params: ['catId '] } } }) .state('app.category.category-detail', { url: "/category-detail", views: { 'menuContent': { templateUrl: "templates/category-detail.html", controller: "DirectoryDetailCtrl", params: [ 'catId' ] } } })

This is my category.html

<ion-view> <ion-nav-bar class="bar-dark nav-title-slide-ios7 bg-nav" ng-controller="NavCtrl"> <ion-nav-back-button class="button-clear" ng-click="myGoBack()"> <i class="ion-chevron-left blanco negrita"></i> </ion-nav-back-button> </ion-nav-bar> <ion-content class="directory-content padding-3 bg-gris"> <ion-list> <ion-item ng-repeat="category in categories" class="item-thumbnail-left tarjeta"> <a ui-sref="app.category.category-detail"> {{category.categoryName}} </a> </ion-item> </ion-list> </ion-content> </ion-view>

Now, if I inspect this website with Chrome Dev Tools I can see the next link is generated: 

 <a ui-sref="app.category.category-detail" href="#/app/category/category-detail?catId=1" class=""> Category 1 </a>

But the view is not being loaded, and no error is shown.

category-detail.html

<ion-view> <ion-nav-bar class="bar-dark nav-title-slide-ios7 bg-nav" ng-controller="NavCtrl"> <ion-nav-back-button class="button-clear" ng-click="myGoBack()"> <i class="ion-chevron-left blanco negrita"></i> </ion-nav-back-button> </ion-nav-bar> <ion-content class="category-content padding-3 bg-gris"> <h1>CATEGORY</h1> </ion-content> </ion-view>
Improve this question

1 Answer 1

Reset to default
3

There is one issue with params definition and second with view/target naming

I. params: ['catId] issue

Read more about params: {} object for example here:

Angular ui router passing data between states without URL

Notation used above:

params: [ 'catId' ]

is not valid anymore... Now we have more settings arround, e.g. the default value:

params : { cateId : null }

read more here

II. view naming

It also seems, that you are trying to target the same ui-view="menuContent" from 'app.category' and its child state 'app.category.category-detail' ... both with relative naming:

 .state('app.category', { url: "/category?catId", views: { 'menuContent': { // no @ = relative name ... .state('app.category.category-detail', { url: "/category-detail", views: { 'menuContent': { ...

In case, that this target ui-view="menuContent" is defined in the 'app' state, we have to use absolute naming

.state('app.category.category-detail', { url: "/category-detail", views: { 'menuContent@app': { ...

The reason is, that name view notation without '@' is realtive and could be expressed as 'viewName@parentState'. So these are the same

.state('app.category', { url: "/category?catId", views: { // relative 'menuContent': { // absolute - targeting the same ui-view 'menuContent@app': { // this is absolute name

Try to get more here (not about ionic, but the UI-Router stuff behind is the same):

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Adding the absolute name and changing the params option worked, thank you Radim. I'll read more about the ui-router to prevent this errors appear again in the future :)
Great to see that Ariel, really. Enjoy mighty UI-Router ;)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.