$stateParams，如何将值从一个状态传递到另一个状态

$stateParams, how to pass value from one state to another

本文关键字：状态 一个 另一个 stateParams      更新时间：2023-09-26

在一个离子/Angularjs项目上，当在一个状态下单击列表中的一个项目时，我如何设置一个规则来根据该列表中单击的项目的项目ID在下一个视图中提取数据？

代码太长了，无法粘贴到这里，但你会在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>

实现这一点的一种方法是使用$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

我认为你基本上应该：

  • 传递url中的id（进程取决于您使用的路由器），例如/bear/:id
  • 让路由器处理重定向
  • 然后在详细视图中，控制器从存储中（通常通过服务）重新获取对象，并通过$scope将其加载到模板中

通过这种方式，您将获得2个独立的、漂亮的无状态和相互链接的路由。这里的无状态意味着，如果你访问/bear/2，即使只是键入url，你也会得到与资源bear 2对应的视图，这是强语义的，就像REST端点一样。

此外，您可以注意到您所描述的模式被称为MasterDetails=）

相关文章：