I am using the starter sidemenu template a of Ionic, My question is very similar to how does app.single work in ionic framework. While I understand the logic, I struggle with the implementation. I customized it a bit and hav:
** a parent "dishList" state with dish#1 (along with url to image, name, description etc...), dish#2, dish#3 etc
** a child "dish" shate which is accessed from clicking on the dish in parent dishList state.
How to i pull data from parent state (dishList) to dish ?
State in app.js :
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('wmapp', {
url: "/wmapp",
abstract: true,
templateUrl: "templates/pages/wm_main.html",
controller: 'wmAppController'
})
.state('wmapp.dishList', {
url: "/dishList",
views: {
'menuContent': {
templateUrl: "templates//pages/dishList.html",
controller: 'DishListController'
}
}
})
.state('wmapp.single', {
url: "/dishList/:itemid",
views: {
'menuContent': {
templateUrl: "templates/pages/dish.html",
controller: 'DishController'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/wmapp/dishList');
});
My controller.js
.controller('DishListController', function($scope) {
$scope.dishList = [
{ nameEnglish: 'beef burgungdy',
nameLocal: 'boeuf bourgignon',
description: 'xxxxxx',
region: 'lazio',
itemid: 'IT018',
cuisineTypeIsoCode: 'IT',
country:'France',
id: 1,
},
{ nameEnglish: 'duck liver',
nameLocal: 'foie gras',
description: 'xxxx',
region: 'sicile',
itemid: 'IT021',
cuisineTypeIsoCode: 'IT',
country:'France',
id: 2,
},
{ nameEnglish: 'veal stew',
nameLocal: 'blanquette de veau',
description: 'xxxxxx',
region: 'parme',
itemid: 'IT022',
cuisineTypeIsoCode: 'IT',
country:'France',
id: 3,
},
{ nameEnglish: 'onion soup',
nameLocal: 'soupe a loignon',
description: 'xxxxxxx',
region: 'vanitia',
itemid: 'IT022',
cuisineTypeIsoCode: 'IT',
country:'France',
id: 3,
}
];
})
my dishList HTML (works fine)
<ion-list>
<ion-item ng-repeat="dish in dishList" href="#/wmapp/dishList/{{dish.itemid}}">
<article class="item_frame">
<a class="" href="#"><img class="bookmark_icon" src="img\bookmark_plus_whitev3.png">
</a>
<img class="item_main_image" ng-src="img/{{dish.cuisineTypeIsoCode}}/{{dish.itemid}}small.jpg">
<img class="item_icon_circled" src="img/dishiconv4orangecircled.png">
<h1 class="item_name_english">{{dish.nameEnglish}}</h1>
<h2 class="item_name_local_language">{{dish.nameLocal}}</h2>
<p class="item_description ">{{dish.description}}</p>
<div class="subcuisine_container_w_flag">
<span class="subcuisine_text_in_dish_pages"> | {{dish.region}}</span>
<img class="flag_in_dishpages" ng-src="img/{{dish.country}}.png">
</div>
</article><!--main article frame 1 -->
</ion-item>
</ion-list>
and my dish html (can't manage to drag the data from ckicked item in dishList e.g here {{dish.nameEnglish return blank}}):
<ion-view view-title="Dish ">
<ion-content>
<p>{{dish.nameEnglish}}</p>
</ion-content>
</ion-view>