Angularjs和routeParams

Question

我有一段从本地服务器获取JSON数据的代码。我正在尝试将这些数据显示到一个页面中，然后当我点击一个产品时，我想要查看它的详细信息。到目前为止，我可以在一个页面中显示我所有的产品，但当我转到详细信息页面时，我得到了一个错误，无法读取未定义的属性'id‘。你能帮帮我吗？

到目前为止，这是我的代码。

app.js

'use strict';

angular.module('app', []).
config(function($routeProvider){
    $routeProvider.
        when("/", {templateUrl: "/partials/products.html"}).
        when("/details/:id", {templateUrl: "/partials/details.html", controller: DetailsCtrl}).
        otherwise({redirectTo: "/"});
})


function AppCtrl($scope, $http){
$http.get('http://localhost:3000/api/products/727617361726372')
    .success(function(data){
        $scope.productList = data;

        /*$scope.filterProductsByCategory = function(category){
            $scope.search = category
        };*/
    })
    .error(function(data){
        console.log("Error!: ");
    });
}

function DetailsCtrl($scope, $routeParams){
   $scope.item = $scope.productList[$routeParams.id];
}

details.html

<h2>This is the details pages</h2>
product id: {{ item.product_id }}
<br/>
product name: {{ item.product_name}}

index.html

<div class="container" ng-app="app" ng-controller="AppCtrl">
    <h1 class="text-danger">Welcome to our Store</h1>
    <hr/>
    <ng-view></ng-view>
</div>

products.html

<div class="col-lg-4 col-sm-6 col-xs-12" ng-repeat="product in productList">
<div class="thumbnail">
    <img src="img/img3.jpeg">
    <div class="caption">
        <h4><a href="#/details/{{product.product_id}}">{{ product.product_name }}</a></h3>
        <p>Category: {{ product.category_name }} ({{ product.category_id }})</p>
        <p class="text-muted">{{ product.product_details}}</p>
        <ul class="list-inline">
            <li>
                <p class="product-price btn">&euro; {{ product.product_price }}</p>
            </li>
            <li>
                <a href="#" class="btn btn-success">Add to Cart</a>
            </li>
        </ul>
    </div>
</div>

​

谢谢！

Answer 1

您将在您的AppCtrl中获得productList。如果您想访问DetailsCtrl中的特定项，则需要获取该特定项，因为您不能在另一个AppCtrl中访问Ctrl范围变量。

要做到这一点，最好的方法是创建一个额外的rest调用来获取单个项。

修复代码的一种快速方法是在AppCtrl中使用$rootcope，不过我真的不推荐这样做

我建议你在$scope上阅读Angular Docs。它可能会让你更好地理解作用域是如何在angular中工作的：https://docs.angularjs.org/guide/scope#！

Answer 2

我假设您已经正确地注入了ngRoute。

angular.module('app', ['ngRoute'])

除此之外，您的代码没有任何问题。

Demo

只需再次检查您的代码即可。