Angularjs 安圭拉酒店$用于显示项目详细信息页面的stateParams

我很抱歉，如果有人在其他地方回答了这个问题，但我似乎无法将我的思想集中在这个问题上，在几个小时的头部撞击之后，是时候发布了

我有一个来自Parse.com的简单项目列表来填充列表页面。我想将列表项目超链接到特定于单个项目的详细信息页面；用于查看项目所有详细信息的页面

我的简单控制器（一个基本函数，用于查看我的服务以连接到解析，以及一个自定义过滤器以过滤页面中的项目）

我的路线（简化）

我的HTML

<div class="row">
    <div class="col-md-4">
        <div class="col-img-page-2 street"></div>
    </div>
    <div class="col-md-6 col-md-offset-1">
        <div class="row">
            <div class="col-md-4" ng-repeat="item in items | filter:filterFn | orderBy:'productType'" style="padding: 0 0 20px 0">
                <div style="width:100px; height: 100px; margin-bottom: 10px; background: #f7f7f7 url('../images/products/{{ item.productImage }}') no-repeat; background-size: contain"></div>
                <strong>Item#: </strong><a ui-sref="streetBreakfastDetail">{{ item.itemName }}</a><br>
                <strong>Type: </strong>{{ item.productType }}
            </div>
        </div>
    </div>
</div>

项目#：{{Item.itemName}}

类型：{{item.productType}

---

我知道这必须是一个简单的答案，但在这一点上，我只需要一只手。感谢您抽出时间。

您正在使用同一个控制器处理列表和详细信息，但您只是在其上实现列表行为

您应该这样做（未经测试）：

正如我所说，这并没有经过测试：）

这是一个非常简单的控制器，但如果您正在考虑在其上实现更多逻辑，您可能应该考虑将其分为两个控制器，一个用于列表，一个用于细节

编辑

你有一份你的PRUNKR的副本。你有两个问题：

• 您没有在

  ui-sref

  指令中传递参数，如下所示：

  ui-sref=“listDetail（{Id:friend.Id}）”

• 在您的控制器中，有一个名为

  list

  的函数，您没有在任何地方调用它

---

使用

ui-sref

时必须传递ID:

例如：

---

项目#：{{Item.itemName}

谢谢你，但我运气不好。我查阅了大量的文档，修改了上面的问题，以反映我根据阅读的教程所做的工作……我的大脑即将爆炸：）通过查看新的变化，特别是路线；你有什么想法吗？谢谢。这是一个Plunk-我没有将它连接到我们的解析帐户，而是在控制器中设置了虚拟数据。基本上，它现在的工作方式与我的应用程序中的工作方式完全相同/不一样-它将路由到详细信息页面，但不显示任何详细信息。如果是look to ui sref指令，您将缺少状态的参数：

ui sref=“streetBreakfastDetail（{id:1}）”

。我现在正在通过电话写信，明天我将修改您的plunkr。@StudioRoster我已经编辑了我的答案，添加了一个指向您的plunkr的链接和一个简短的解释。

.state('streetBreakfast', {
    url: '/street/breakfast',
    templateUrl: 'views/street-breakfast.html',
    controller: 'ProductCtrl'
})
.state('streetBreakfastDetail', {
    url: '/street/breakfast/:itemId',
    templateUrl: 'views/street-breakfast-detail.html',
    controller: function($scope, $stateParams) {
    $scope.itemId = $stateParams.itemId;
    }
})

<div class="row">
    <div class="col-md-4">
        <div class="col-img-page-2 street"></div>
    </div>
    <div class="col-md-6 col-md-offset-1">
        <div class="row">
            <div class="col-md-4" ng-repeat="item in items | filter:filterFn | orderBy:'productType'" style="padding: 0 0 20px 0">
                <div style="width:100px; height: 100px; margin-bottom: 10px; background: #f7f7f7 url('../images/products/{{ item.productImage }}') no-repeat; background-size: contain"></div>
                <strong>Item#: </strong><a ui-sref="streetBreakfastDetail">{{ item.itemName }}</a><br>
                <strong>Type: </strong>{{ item.productType }}
            </div>
        </div>
    </div>
</div>

.controller('ProductCtrl', [
    '$scope',
    '$stateParams',
    'Product',

    function($scope, $stateParams, Product) {
        var itemId = $stateParams.item;

        if (itemId) {
            Product.getItem(itemId).success(function(data){
                $scope.myItem=data.results;
            });
        } else {
            Product.getAll().success(function(data){
                $scope.items=data.results;
            });

            $scope.filterFn = function(streetBreakfast)
            {
                return(streetBreakfast.segmentStreet === 1) && (streetBreakfast.productCategory === 'Breakfast');
            };
        }
    }]);