Question

如果在其他地方得到了回答，我道歉，但似乎无法让我的思绪缠绕在这里，经过几个小时的敲打，是时候发布了。

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

我的简单控制器（查看我的服务以连接到Parse的基本功能和用于过滤页面项目的自定义过滤器）

.controller('ProductCtrl',['$scope','$stateParams','Product',function($scope,$stateParams,Product) {
        Product.getAll().success(function(data){
            $scope.items=data.results;
        });

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

我的路线（为简洁而减少）

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

我的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>

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

Answer 1

您使用相同的控制器来获取列表和详细信息，但您只是在其上实现列表行为。

你应该做这样的事情（未经过测试）：

.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');
            };
        }
    }]);

正如我所说，这未经过测试：）

这是一个非常简单的控制器，但如果您正在考虑在其上实现更多逻辑，您应该考虑在两个控制器中将它分开，一个用于列表，一个用于详细信息。

修改

Here你有一份固定的plunkr副本。你有两个问题：

您没有在ui-sref指令中传递参数，如下所示：ui-sref="listDetail({Id: friend.id})"

在您的控制器中，您有一个名为list的功能，您无法在任何地方呼叫。

Answer 2

使用ui-sref时必须传递ID：

Plunker示例：http://plnkr.co/edit/phRgzfEBQEn5W0m7JLOB?p=preview

<strong>Item#: </strong><a ui-sref="streetBreakfastDetail({itemId: item.id })">{{ item.itemName }}</a><br>

AngularJS＆amp; $ stateParams显示项目详细信息页面

2 个答案: