CODEWITHSUNDEEP
javascripthtmlangularjsionic-framework
Benedict Lewis
Benedict Lewis

Reputation: 2813

Pass variable onto Ionic Framework page (based on AngularJS)

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.

Upvotes: 0

Views: 11975

Answers (2)

Omar
Omar

Reputation: 36

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

Upvotes: 2

maurycy
maurycy

Reputation: 8465

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

Upvotes: 2

Related Questions