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.
Hi, and thank you for your help.
I tried it and I could not make et work
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.
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:
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;
});
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?
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.
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
