Угловые данные прохода на отдельную страницу

Question

У меня есть список предметов, отображаемых с помощью службы, используя ng-repeat. Все эти элементы имеют ссылку «полная информация о деталях» (item.html). Общая страница, на которой будет отображаться дополнительная информация.

Что было бы лучшим способом передать данные элемента, нажатого на item.html, чтобы информация отображалась на выбранном элементе?

HTML выглядит следующим образом:

<div class="container" ng-app="myApp"> 
    <div ng-controller="ItemController"> 
     <div ng-repeat="item in data.details"> 
      <div class="wrapper"> 
       <h3>{{item.title}}</h3> 
       <p>{{item.description}}</p> 
       <a href="#myModal" class="btn" openmodal>Open modal</a> 
       <a href="item.html">View full item details</a> 
      </div> 
     </div> 
    </div> 
</div> 

Угловые

var myApp = angular.module('myApp', []); 

myApp.factory('Data', function(){ 
    var Data = {}; 
    Data.details = [ 
     { 
      "id": 1, 
      "title": "Item 1", 
      "description": "Post 1 description - Nullam ac tellus sed mi laoreet placerat.", 
      "more": "more info" 
     }, 
     { 
      "id": 2, 
      "title": "Item 2", 
      "description": "Post 2 description - Cociis natoque penatibus et magnis dis parturient montes.", 
      "more": "more info" 

     }, 
     { 
      "id": 3, 
      "title": "Item 3", 
      "description": "Post 3 description - Nullam ac tellus sed mi laoreet placerat.", 
      "more": "more info" 
     } 
    ] 
    return Data; 
}); 

// Controller 
function ItemController($scope, Data){ 
    $scope.data = Data; 
} 

Заранее спасибо

EDIT

Я создал свои маршруты, HTML-страницу для каждого маршрута, затем использую ng-view, чтобы показать соответствующий контент.

Смотрите мой код ниже:

// Routes 
myApp.config(function($routeProvider){ 
    $routeProvider 
     .when('/', { 
       templateUrl:"home.html" 
     }) 
     .when('/task', { 
       templateUrl:"item.html" 
     }) 
}) 

// Controller 
function ItemController($scope, $location, Item){ 
    $scope.data = Item; 

    $scope.viewDetail = function(item) { 
     $scope.currItem= item; 
     $location.path('/item'); 
    } 
} 

Теперь index.html выглядит следующим образом:

<div class="container"> 
    <ng-view></ng-view> 
</div> 

Затем я создал отдельные файлы для моих маршрутов:

home.html

<div class="container" ng-app="myApp"> 
    <div ng-controller="ItemController"> 
     <div ng-repeat="item in item.details"> 
      <h3>{{item.title}}</h3> 
      <a ng-click="viewDetail(item)">View full item details</a> 
     </div> 
    </div> 
</div> 

item.html

<div class="container" ng-app="myApp"> 
    <div ng-controller="ItemController"> 
     <h3>{{currItem.title}}</h3> 
     <p>{{currItem.description}}</p> 
    </div> 
</div> 

Моя ссылка (подробности Посмотреть полный товар) в home.html использует нг щелчок, чтобы передать «элемент» объект щелкнул.
Теперь я хотел бы использовать этот предмет объекта в item.html console.log (item) дает мне правильный объект.

Я попытался использовать «currItem» в item.html, чтобы отобразить правильные данные. Это не работает.

Не уверен, что мне здесь не хватает?

Answer 1

В зависимости от того, что делает index.html, вы можете передать его в качестве параметра. например

index.html?title={{item.title}}&id={{item.id}} 

а затем используйте javascript в index.html, чтобы получить строку запроса и проанализировать ее для отображения.

Не уверен, что у вас есть требование реализовать это как другую страницу или вы можете использовать другое представление вместо этого?

Если она может быть реализована в виде отдельной точки зрения есть несколько вариантов там:

• вы могли бы использовать общую службу, чтобы передать данные другому контроллеру и привязать ее к модели нового контроллера. Дополнительную информацию об услугах см. В следующей ссылке.http://docs.angularjs.org/guide/dev_guide.services.creating_services

• можно использовать переменную $ scope для создания новой модели для выбранного элемента и использования существующего контроллера.

Answer 2

Это действительно сводится к тому, как вы структурируете свой веб-сайт и как хотите, чтобы приложение протекало. У вас есть несколько вариантов, первый из которых является самым угловым способом сделать это.

1. Воспользоваться the $route service и ngView.

2. Храните все в одной строке на одной странице. Вам нужно будет заменить <a href="item.html"> чем-то вроде <span ng-click="showDetails(item)">, который отобразит/спрячет отдельный div, который содержит содержимое item.html, которое может быть связано с $scope.currentItem. $scope.showDetails будет выглядеть так: $scope.showDetails = function (item) { $scope.currentItem = item }, и item.html будет в контейнере наподобие: <div ng-show="currentItem != undefined">...</div> или аналогичного.

3. Оформить заявку на новую страницу, изменив <a href="item.html"> на номер <a href="item.html?itemId={{item.id}}">. Для этого потребуется несколько дополнительных запросов к серверу (не только для загрузки item.html, но и для чтения location.search, а затем для загрузки данных (которые вы уже имели в предыдущем запросе) обратно на новую страницу.

EDIT

Если вы собираетесь с ngView, вы должны изменить ItemController принять $route аргумент, что вы бы затем использовать для проверки идентификатора товара, как так:

app.controller('ItemController', function ($scope, $route) { 
    // TODO load the item from some service or using ajax, here's the id: 
    console.log($route.current.params.id); 
});