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，你是不是在任何地方打電話。