Question

在离子/ 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，即使只是输入网址，您也会得到与资源熊2相对应的视图，这是强烈的语义，就像REST端点一样。

此外，您可以注意到您描述的模式称为主 - 详细信息 =）

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

2 个答案: