得到下一個頁面上點擊的元素的控制值angularjs

Question

我在angularjs在那裏我有多個產品在控制器這樣

$scope.products = [ 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 14, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 11, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 10, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 9, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 8, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 13, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 12, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 7, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 6, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 3, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 2, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 1, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 5, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 4, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 14, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 11, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 10, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 9, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 8, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 13, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 12, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 7, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 6, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 3, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 2, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 1, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 5, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 4, link: '#products_detail'}, 
]; 

我與得到的產品在視圖中的電子商務門戶網站工作ng-repeat和它的工作正常。下面是產品頁面的URL http://trendnyou.com/#/products

現在我想擴展這個，當我在現在點擊任何按鈕購買它會打開一個詳細頁throught routeprovider，我需要從同取值控制器而只是點擊產品。這裏是詳細信息的頁面http://trendnyou.com/#/products_detail

現在，這是一個虛擬頁面，具有相同的數據，不管你點擊了什麼產品，我只想顯示點擊產品的數據。

Answer 1

我發現那位這是工作的罰款對我來說是最簡單的方法

做一個功能在其中點擊的元素像這樣

$scope.storeSelectedProduct = function(){ 
    localStorage.selectedProduct = this.$index; 
} 

索引和運行此功能存儲在產品上的ng-click和將索引存儲到localstorage，以便該值不會在頁面重新加載時消失。

現在，當頁面改變我正在初始化函數與ng-init來獲取值局部變量

$scope.getSelectedProduct = function(){ 
    $scope.selectedProduct = localStorage.getItem('selectedProduct'); 
} 

現在我只剩下任務顯示點擊的元素的只對細節我使用ng-repeat用切片和從它我得到的產品列表網頁

ng-repeat="product in products.slice('selectedProduct','selectedProduct+1')" 

值有了這個我是從同一個控制器讓所有的值，而是從點擊的元素只有inste相同的控制器得到的值廣告存儲在localstorage中的所有值我只是存儲索引。

Answer 2

編寫單擊鏈接的單擊事件並將特定產品詳細信息存儲到本地存儲中，然後重定向到相應的位置。在products_detail控制器中，您可以從localstorage再次讀取並進行渲染。

function storeSelectedProduct(){ 
     localStorage.setItem('selectedProduct',obj);   
    } 

    $routeProvider.when("/products_detail", { 
      controller: "productdetailcontroller", 
      templateUrl: "detail.html", 
      resolve: { 
       "selectedProduct": function() { 
        return localStorage.getItem('selectedProduct'); 
       } 
      } 
     }); 
app.controller("productdetailcontroller", function ($scope, selectedProduct) { 
      $scope.selectedProduct = selectedProduct; 
     }); 

現在您可以從當前範圍中讀取所選產品。