CODEWITHSUNDEEP
javascriptangularjsionic-framework
Amit Patil
Amit Patil

Reputation: 3067

Ionic and angularjs nested steps app

I am just learning angularjs and ionic frameworks, And i copied one of the demo and tried to make changes but not sure why its not working. I am not able to see "speakers profile details" page. 

- Speakers
--- Speakers lists
----- Speakers profile details
- Schedule
- venue
- sponsors

Here is the code pen demo

Codepen demo

Upvotes: 0

Views: 105

Answers (1)

Chris Moutray
Chris Moutray

Reputation: 18379

I found 3 things that contribute to this not working:

  1. The speakersinfo template is missing ion-view and ion-content.

Make sure it starts like this:

<script id="templates/speakersinfo.html" type="text/ng-template">
<ion-view view-title="Speakers Info">
    <ion-content>
  1. The controller names do not match - you reference the controller in the state provider as speakerInfo (without 's' on end of speaker) but declared the controller as speakersinfo (with 's' on end of speaker).

Make sure the names match (which ever way you decide).

  1. You try to access the state eventmenu.speakers.speakersinfo using the url #/event/speakersinfo but its important to understand how nested states work with the angular-ui/ui-router - the url in the state declaration is appended to its inherited state. So here eventmenu.speakers.speakersinfo is a child state of eventmenu.speakers so the url must be #/event/speakers/speakersinfo. Or you could change the state name to eventmenu.speakersinfo - I tried this and it worked for me.

Personally I think its better to use the ui-sref attribute instead of href the url; this way you use the declared state name and there's no confusion.

Also just to mention that you've repeated the template for attendees <script id="templates/attendees.html" type="text/ng-template">

Upvotes: 2

Related Questions