Passing Parameter between Views


#1

Hi,
ionic is new to me and I have a problem.
I am trying to make a cooking app. I will have some lists (dinner, brakfast) which have sub sublists (chicken, burgers) and so on. Then they will end up in a recipe page.

My question is: How do I pass the parameters from the list to the recipe page?
How does the recepi page template know {{tilte}} and all other paramters I’ve put in the “controllers.js” file.

I am using “$ ionic start myApp sidemenu” and the playlist are doing a good job, but they do not end up in a “recipe” page.

If you could help I would really appreciate it

Thanks


Pass parameter from a view to another view
#2

Make one service that hold the value of list item which was clicked.

And this service on the both page controller (list page and recipe page)

and make one method in list page controller that store clicked item data in to service variable.

which can be accessible on recipe page because we injected same service i recipe page controller.

Listpage.html

 <ion-list class="margin-top-10 list" id="testList" ng-controller="recipeListController">
    <ion-item ng-repeat="recipe in recepies">
          <div class="item item-avatar col arrowDiv margin-0 item-text-wrap customer-item" ng-click="setRecipe(recipe.name)">
                        <h4>Recipe Name : <b> {{recipe.name}} </b></h4>                     
                    </div>   
                </ion-item>
</ion-list>

recipeListController

App.controller("recipeListController", function($scope,recipeService) {
  
    $scope.recepies=[{"name":"dinner"},{"name":"breakfast"}];

    $scope.setRecipe=function(val){
         recipeService.selectedRecipe=val;
        //and your redirection stuff goes here.
     };    
});

recipePageController

  App.controller("recipePageController", function($scope,recipeService) {
        $scope.recipeService=recipeService;          
    });

recipeService

App.service(‘recipeService’, function() {
this.selectedRecipe;
});

recipePage.html

<div ng-controller="recipePageController">
   <h1>{{recipeService.selectedRecipe}}</h1>
</div>

given code is just sample you can do this way.


#3

Hi, and thank you for your help.
I tried it and I could not make et work :frowning:

What would it look like, if et was just one list and all the items on that list had a page.
So a list linking to a page and bringing parameters to the page.

Could you make that example? I am sorry that i dont get it.


#4

Hey danielnn, jariwalabhavesh provides a common way for doing this. But if you mean the “bringing”, then $stateParams will be something you are looking for.

Normally, when you are defining your state in app.js files, you need to annouce the link. Now do the following (this is actually an official example):

.state('app.single', {
  url: "/playlists/:playlistId",  // here is what you annouce the params
  views: {
    'menuContent': {
      templateUrl: "templates/playlist.html",
      controller: 'PlaylistCtrl'
    }
  }
})

According to ui-router official stateParams doc, you can add as many params as you like. Just like:

.state('app.single', {
  url: "/playlists/:bigListId/{smallListId}/?from&to", 
  views: {
    'menuContent': {
      templateUrl: "templates/playlist.html",
      controller: 'PlaylistCtrl'
    }
  }
})

Next, in your “destination controller”, inject the $stateParams service, and access it just like normal object, it will parse all the params for you.

Hope this helps, feel free to ask if you have any further problems.


#5

hi denielnn

sure i will explain it.

can you tell me the flow of your views?

then i can explain it better way.

windht has provided one of the way to send value to the next view.


#6

Hi jariwalabhavesh,

I am making an app with list of allergy-friendly food.

I start with listing categories:

  • Fruit
  • Vegetable
    and so on…

If you click fruit I list ther different fruit and which one ar allergy-friendly (Green dot)

  • Apple
    -Banana

So far so good.

If you click Apple, I want a detail page for Apple with a title, text, an image and so on.

How do I Pass Parameter from Fruit to Fruit detail page?
The Category page is static html and that works fine for me

You can see the files here:
https://github.com/moochie23/AllergyApp


#7

hi danielnn

here is working code

playlist.html

 <ion-view view-title="playlists">
      <ion-content ng-controller="PlaylistCtrl">
       V {{detailService.itemName}}
      </ion-content>
    </ion-view>

playlists.html

<ion-view view-title="Playlists">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}" ng-click="getDetail(playlist)">
       <i class="icon ion-{{playlist.fm}}"></i> 
       {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

controllers.js

angular.module('starter.controllers', [])


.service('detailService', function() {
    this.itemName;
})

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})

.controller('PlaylistsCtrl', function($scope,detailService) {
  $scope.playlists = [
    { title: 'Apple', id: 1, fm: "y"},
    { title: 'Banana', id: 2, fm: "n" },
  ];
  
  $scope.getDetail=function(ObjectData){
	detailService.itemName=ObjectData.title;
  }
  
})

.controller('PlaylistCtrl', function($scope,$stateParams,detailService) {
	$scope.detailService=detailService;    	
});

#8

Thank you very much. You really helped me out. :smile:


#9

Hi again,
Okay, so now I made one static HTML list which links to different sublists.
It has 12 different controllers and it is not running tha great in the iOS Simulator.

My question is now? Is that just the simulator or is heavey because I made it that way?
What would be the correct way to Make All food -> Fruit -> Fruit Detail pages, If I were to make it with one template?

Help will be appreciated :sunny:


#10

Hi danielnn

According to me there should be only three page.

  1. category list page.
  2. Subcategory list page.
  3. Detail page.

so no need to make separate page for each product so there should be only 3 controller and required service.

if i am getting wrong in your application functionality, then please tell me. I give you suggestion based on your 3rd post.


#11

Hi jariwalabhavesh,
You helped me so much.

You are right about the 3 templates, but did you make that example or?
That is exactly how I would want it.

In the 3 post I just wanted a static list and then a dynamic list (fodmap_categories.html) with a detail page, but it seems that the static list is running very slow.


#12

i had tested app on android it is working fine.

What actually problem you are facing with ios platform?


#13

Hi,
Did you make a version of the app with only three pages?

  1. category list page.
  2. Subcategory list page.
  3. Detail page.
    If you did, please make a branch on Github.
    I am not sure how to make i myself.

When I run the app with the 12 different lists, it run slow on iOS


#14

I have busy schedule. so it will take some time.


#15

You take all the time you need, I am just happy if you will help. Thank you :slight_smile:


#16

This could be a bad idea, but you could use the angular $rootscope which will underly all pages.

Much simpler than passing stuff around in the routes


#17

Okay, and how do I do that?


#18

https://docs.angularjs.org/api/ng/service/$rootScope
https://docs.angularjs.org/guide/scope

Inject $rootScope exactly the same as you inject $scope in each controller and use it in the same way, the difference is variables added in $rootScope are visible in ALL controllers, also, I don’t believe you need to inject the $rootscope in other controllers if you are only adding to it in one controller due to scope hierarchies. ^^^ Read about it, it’s quite cool


#19

Hi I am trying to send data from one view to another using $stateParams.Its working fine, but when my data contains “/” then it does not get the view.

example

In controller
$scope.data=‘image/myimage.png’;

in view

href="#/app/myview/:data" //here it is not getting the requesting view

findings:

internally it is treating #/app/myview/:data is treated as ** #/app/myview/:image/myimage.png**


because of “/” is $scope .data it is looking for different state that i have not configured.

I am completely stuck, any help would be very beneficial.

best regards,
Kashif.


#20

Thank you very much. You really helped me out. :grinning: