current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have a set of tabs in Ionic framework which show a list of movies:

<script id="tabs.html" type="text/ng-template">
  <ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
    <ion-tab title="Movies" icon="ion-film-marker" href="#/tab/movies">
      <ion-nav-view name="movies-tab"></ion-nav-view>
    </ion-tab>
  </ion-tabs>
</script>

<script id="movies.html" type="text/ng-template">
  <ion-view title="'Movies'">
    <ion-content has-header="true" padding="false">
      <div class="list">
        <a ng-repeat="item in movies" href="#/tab/movies/{{item.id}}" class="item item-thumbnail-left item-text-wrap">
          <img ng-src="{{ item.image }}">
          <h2>{{ item.title }}</h2>
          <h4>{{ item.desc }}</h4>
        </a>
      </div>
    </ion-content>
  </ion-view>
</script>

Each of the items in the list is linked to #/tab/movies/{{item.id}}, for example, #/tab/movies/27. My movies are defined in the controler

.controller('MyCtrl', function($scope) {    
  $scope.movies = [
    { id: 1, title: '12 Rounds', desc: 'Detective Danny Fisher discovers his girlfriend has been kidnapped by a ex-con tied to Fisher\'s past, and he\'ll have to successfully complete 12 challenges in order to secure her safe release.', image: ''}
  ];

My pages are routed as below:

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "tabs.html"
    })
    .state('tabs.movies', {
      url: "/movies",
      views: {
        'movies-tab': {
          templateUrl: "movies.html",
          controller: 'MyCtrl'
        }
      }
    })

   $urlRouterProvider.otherwise("/tab/movies");

})

What I need to do now is when each item on the above list is clicked, it takes it to it's own page, #/tab/movies/{{item.id}}, where I can display things like item.title or item.image, along with a back button to go to the list.

In order to do this, from what I can tell, I need to create a blank ng-template with a placeholder for the information, and then some how pass this information to it when clicked, but I'm not sure how to do this.

share|improve this question
add comment

2 Answers

up vote 0 down vote

What are you looking for is probably service/factory where you can store list of movies and then retrieve full list for MyCtrl or just a single movie object for movie page.

angular.module('myAppName')
.factory('MovieService', function () {
    return {
        MoviesList: [
            {movie object}
        ],
        GetAllMovies: function () {
            return this.MoviesList;
        },
        GetMovieById: function (id) {
            //iterate MoviesList and return proper movie
        }
    }
}

that service can be then injected into your controllers

.controller('MyCtrl', function($scope, MoviesService) {    
    $scope.movies = MoviesService.GetAllMovies();
}

and same goes for a movie view controller:

.controller('ShowMyMovie', function($scope, MoviesService) {    
    $scope.movie = MoviesService.GetMovieById(//retrieve_id_from_routing_service);
}

then in template for this view you can simply use {{movie.title}} to display informations

share|improve this answer
add comment
up vote 0 down vote

In your stateProvider config, you need to add a placeholderFor for the movie id, something like:

.state('tabs.movies', {
  url: "/movies/:id",
  views: {
    'movies-tab': {
      templateUrl: "movies.html",
      controller: 'MyCtrl'
    }
  }
})

see https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.