Yasser B.
Yasser B.

Reputation: 835

Navigating between ion-views on ionic

This is a very interesting question where I didn't find any answer.

I have different views like the draw below :

enter image description here

I have the first html file which contains three views i'm using the code below for it :

$stateProvider
    .state('home', {
  url: '/home',
  views: {
    day: {
      templateUrl: 'home.html',

    }
  }
})

 .state('help', {
  url: '/help',
  views: {
    day: {
      templateUrl: 'help.html'
    }
  }
})

 .state('contact', {
  url: '/contact',
  views: {
    day: {
      templateUrl: 'contact.html'
    }
  }
})

and in the html file the container : <ion-nav-view name="day"></ion-nav-view>

then a second HTML file which contains a content and a couple of views like :

.state('c', {
  url: '/c',
  views: {
    view: {
      templateUrl: 'composition.html'
    }
  }
})

 .state('h', {
  url: '/h',
  views: {
    view: {
      templateUrl: 'resume.html'
    }
  }
})

and the container in the second html file : <ion-nav-view name="view"></ion-nav-view>

When clicking on any item of any view of the first html it should redirect to the second html file with both views.

What should I really use ??

I tried to do this :

make a racine html file which will consider the two html files as ion-views :

and then make changes on the state provider like this :

$stateProvider
    .state('index.home', {
  url: '/home',
  views: {
    day: {
      templateUrl: 'home.html',

    }
  }
})

 .state('index.help', {
  url: '/help',
  views: {
    day: {
      templateUrl: 'help.html'
    }
  }
})

 .state('index.contact', {
  url: '/contact',
  views: {
    day: {
      templateUrl: 'contact.html'
    }
  }
})

 .state('match.c', {
  url: '/c',
  views: {
    view: {
      templateUrl: 'composition.html'
    }
  }
})

 .state('match.h', {
  url: '/h',
  views: {
    view: {
      templateUrl: 'resume.html'
    }
  }
})

 .state('index', {
  url: '/index',
    abstract: true,
  views: {
    index: {
      templateUrl: 'first.html'
    }
  }
})

 .state('index.match', {
  url: '/match',

  views: {
    day: {
      templateUrl: 'second.html'
    }
  }
})

what do you think please ??

PLUNKER DEMO

Upvotes: 1

Views: 206

Answers (1)

Karan Kumar
Karan Kumar

Reputation: 2665

From the understanding of question. Is this what you wanted ? If not, let me know. I'll edit. you needed to call ui-sref="match.h" at home.html , this way your 'resume' would show on page transition.

Plunker

Upvotes: 1

Related Questions