javascript - $stateParams，如何将值从一种状态传递到另一种状态

Question

在 ionic/Angularjs 项目中，当在某种状态下的列表中单击一个项目时，如何设置规则以通过在此列表中单击的项目的 itemID 来提取下一个 View 上的数据？

代码太长，无法粘贴到此处，但您可以在 jsfiddle 中了解想法。

我想通过单击列表中灰色的项目来更新该项目的详细 View 的信息(蓝色背景)。

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

详细 View 的 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 在新状态的 Controller 中访问这些参数。

对于您的示例，它会是这样的

在 ListView 中:

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

然后，在下一个状态中，您可以从 $stateParams 获取 Controller 中的 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