Как передать данные из одного шаблона в другой?

Question

[Виталий Киренков]

Здравствуйте.

Впервые пытаюсь сам написать на ангуляре приложение, и вопрос наверно простой, но никак не въеду где собака зарыта((

Есть каталог, по клику на элемент надо показать его детальную страницу. Переход делается, но как данные подтянуть - не понимаю

Есть пока роутер

angular.module("ShoppingCart", ["ngRoute"])
	.controller("catalogListController", function(){
		this.catalogItems = arrCatalog;
		this.catalogItemsCategories = arrCategories;
	})

	.config(function($routeProvider){
		$routeProvider
			.when("/", {
				templateUrl: "templates/catalog-index.html"
			})
			.when("/create", {
				templateUrl: "templates/create-index.html"
			})
			.when("/:id", {
				templateUrl: "templates/item-index.html"
			})
			.otherwise({
				redirectTo: "/"
			})
	})

Есть моделька

var arrCatalog = [
	{
		id: 0,
		title: "TV 1",
		description: "Some description for TV 1",
		price: "$ 13",
		image: "upload/tv-1.jpg",
		type: {tv: true}
	},
	{
		id: 1,
		title: "TV 2",
		description: "Some description for TV 2",
		price: "$ 23",
		image: "upload/tv-2.jpg",
		type: {tv: true}
	},

И так выглядит ссылка
<a ng-href="#/{{catalogItem.id}}">

И тут уже шаблон детальной

<h1 class="page-header">{{title}}</h1>

<div class="row catalog-inner">
	<div class="col-xs-6">
		<div class="img-big"><img src="upload/notebook-1.jpg" alt=""></div>
	</div>
	<div class="col-xs-6">
		<div class="price">$ 20</div>
		<div class="description">description</div>
		<div class="quantity">
			<form action="#" class="form-inline clearfix">

Answer 1

[Vladimir]

Для страницы на которую ты переходишь должен быть задан контроллер, в котором по id достаешь нужный элемент с данными.

Comments

[Виталий Киренков]

Ну я это тоже понял, все кручусь вокруг да около.

Написал это
.when("/:id", {
templateUrl: "templates/item-index.html",
controller: "catalogItemController"
})

И никак не могу понять как написать это((
.controller("catalogItemController", function($scope, $routeParams){
$scope.item = $routeParams.id;
})

[Vladimir]

Виталий Киренков: А почему приравниваешь к item айдишник записи?
Ты с помощью него должен достать из "модели" запись, в данном случаи спомощью $filter , ну или по индексу из массива arrCatalog[id]. Но ясно дело для работы с данными лучше нормальную модельку.

[Виталий Киренков]

Vladimir: Это так сложно написать в виде кода, да?

[Vladimir]

Виталий Киренков: ну я просто не знаю где и как у вас хранятся данные arrCatalo, как вообще идет работа с ними? Был бы пример например на jsfiddle.net там можно было бы подсказать действия.
По сути должен быть сервис
angular.module('ShoppingCart').factory('ItemsStore', function() {
return {
items: []
}
});
Где будут хранится элементы и с ним уже работать.
.controller("catalogListController", function(ItemsStore){
this.catalogItems = ItemsStore.items;
this.catalogItemsCategories = arrCategories;
})
.controller("catalogItemController", function($scope, $routeParams, ItemsStore, $filter){
$scope.item = $filter('filter')(ItemsStore.items, { id: $routeParams.id})[0];
})