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

您將在productList中獲得AppCtrl 。 如果你想在你訪問一個特定項目DetailsCtrl你需要得到具體的項目，因為你不能訪問AppCtrl在另一按Ctrl范圍內的變量。

最好的方法是創建一個額外的休息電話以獲取單個物品。

修復代碼的快速方法，盡管我真的不建議這樣做 ，但應在$rootcope中使用$rootcope AppCtrl

我建議在$ scope上閱讀Angular Docs。 它可以使您更好地了解范圍如何在角度工作： https : //docs.angularjs.org/guide/scope# ！

Answer 2

我假設您已正確注入ngRoute。

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

除此之外，您的代碼沒有任何問題。

演示版

只需再次檢查您的代碼。