$ stateParams，如何將值從一個州傳遞到另一個州

Question

在ionic / Angularjs項目上，當以某種狀態在列表中單擊一個項目時，由於在此列表中單擊的項目的itemID，如何設置規則以在下一個視圖中提取數據？

代碼太長了，無法粘貼到這里，但是您將在jsfiddle中找到想法

我想通過單擊列表中灰色的項目，更新該項目（在藍色背景中）的詳細視圖的信息。

列表視圖的HTML：

        <h1 class="featured_in_mag_name">Dishes in that category:</h1>        
    <ion-item ng-repeat="dish in dishList | selectedDishType:selection ">
       <article class="item_frame">
          <h4 class="item_name_english">{{dish.nameEnglish}}</h4>
          <p class="item_name_local_language">{{dish.nameLocal}}</p> 
        </article>
        <!--main article frame 1 -->
    </ion-item>
</ion-list>

詳細視圖的HTML

<ion-view view-title="Dish " >
   <h1 class="featured_in_mag_name">Selected dish - detailed view:   </h1>    
    <ion-content>
   <article class="detailed_view">
      <h1 class="item_name_english">{{dish.nameEnglish}}</h1>
      <p class="item_name_local_language">{{dish.nameLocal}}</p>
      <p class="item_name_local_language">{{dish.nameLocal}}</p>    
      <p class="item_name_local_language">{{dish.description}}</p>
      <p class="item_name_local_language">{{dish.region}}</p> 
      <p class="item_name_local_language">{{dish.country}}</p>
    </article>              
  </ion-content>
</ion-view>

Answer 1

一種方法是使用$ state服務。 $ state.go將過渡到新狀態，並可以接受該狀態的參數。 然后可以通過$ stateParams在新狀態的控制器中訪問這些參數。

以您的示例為例

在列表視圖中：

<ion-item ng-repeat="dish in dishList | selectedDishType:selection " ng-click="$state.go('detailsState', { id: dish.itemID })">

然后，在下一個狀態中，您可以像這樣從$ stateParams中獲取控制器中的ID：

function controller($stateParams) {
    var itemId = $stateParams.id;
}

請記住，要進行此工作，您將必須使用以下路線設置狀態：

$stateProvider.state("detailsState", {
   url: "/details/:id"
});

所有這些都是ui.router模塊的一部分。 有關更多信息，請參見http://angular-ui.github.io/ui-router/site/#/api/ui.router

Answer 2

我說你基本上應該：

• 在網址中傳遞 ID（具體取決於您使用的路由器），例如/bear/:id
• 讓您的路由器處理重定向
• 然后在詳細視圖控制器中從存儲中重新獲取對象（通常通過服務），然后通過$scope其加載到模板中

這樣，您將獲得2條彼此鏈接的獨立 ，非常無狀態的路由。 這里的無狀態意味着，即使您訪問/bear/2 ，即使只是鍵入url，也將獲得對應於資源熊2的視圖核心，該熊具有強烈的語義，就像REST端點一樣。

另外，您可以注意到，您描述的模式稱為Master-Details =）