javascript - 从angularjs中下一页上单击元素的 Controller 获取值

Question

我正在用 angularjs 开发一个电子商务门户网站，我在 Controller 中有多个这样的产品

$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

现在我想扩展它，当我点击任何按钮上的立即购买时，它会在我需要的地方通过 routeprovider 打开一个详细信息页面从同一个 Controller 获取值，但仅获取被点击产品的值。这是详细信息页面的 URL http://trendnyou.com/#/products_detail

现在这是一个具有相同数据的虚拟页面，无论您点击什么产品，我只想显示被点击产品的数据。

Answer 1

为您单击的链接编写 ng-click 事件，并将特定产品详细信息存储到本地存储中，然后重定向到相应位置。在 products_detail Controller 中，您可以再次从本地存储中读取并呈现它。

    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;
        });

现在您可以从当前范围读取所选产品。