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

Question

如果在其他地方已经回答了这个问题，我表示歉意，但是我似乎无法让我的思绪缠绕在这里，并在几小时后敲打我的脑袋，发布时间。

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

我简单的控制器（基本功能，着眼于我的服务连接到分析和自定义过滤器来过滤项目的页面）

.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

的ID具有使用ui-sref时传递：

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

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

Answer 2

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

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

.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，你是不是在任何地方打电话。