AngularJS从索引到详细页面的动态路由

Question

我试图从索引项目列表路由到显示该项目的详细视图的页面。

在我的索引视图中，我有一个遍历数据库中保存的所有项目的表。

有行动列下一个按钮，将带我去事件/使用显示路线ng-click="go('events/show')"

<table class="table table-striped table-bordered"> 
    <thead> 
     <tr> 
      <th>Title</th> 
      <th class="col-md-2">Actions</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr scope="row" ng-repeat="event in events | reverse | filter:filterByUID"> 
      <td>{{event.title}}</td> 
      <td class="col-md-2"> 
       <div class="btn-group" role="group" aria-label="actions"> 
        <button class="btn btn-primary" ng-click="go('events/show')"> 
         <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 
        </button> 
        <button class="btn btn-primary" ng-click="events.$remove(event)"> 
         <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 
        </button> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

表看起来是这样的：

在我的控制，我有：

$scope.go = function (path) { 
     $location.path(path); 
    }; 

在我的routes.js我有：

.whenAuthenticated('/events/show', { 
     templateUrl: 'views/eventShow.html', 
     controller: 'eventShowCtrl' 
     }) 

一切工作到目前为止。

但是，我不清楚的是如何将事件ID传递到eventShow.html页面，所以我知道从索引列表中单击了哪个项目，以便我可以显示详细信息？

我的火力数据库看起来是这样的：

Answer 1

退房UI路由器，它使动态路由更容易

https://github.com/angular-ui/ui-router

但是，如果你想保持你有什么，您应该将事件ID传递到您的路径中，例如

$scope.go = function (path, event) { 
    $location.path(path + "/" + event.id); 
}; 

.whenAuthenticated('/events/show/:eventId', { 
    templateUrl: 'views/eventShow.html', 
    controller: 'eventShowCtrl' 
}) 

并在您的控制器中，访问$ stateParams.eventId来加载该事件。

Answer 2

您应该使用一个变量在你的路由器：

.whenAuthenticated('/events/:id', { 
    templateUrl: 'views/eventShow.html', 
    controller: 'eventShowCtrl' 
}) 

然后，你可以简单地使用ID在你的函数调用：

go('events/:id') 

Here's a great tutorial（我强烈推荐看着这一切两部分的）。

而且你会有更好的网址，可以添加书签。

Answer 3

一个你可以通过UID（UID仅仅是用户ID为例）的onClick

<tr scope="row" ng-repeat="event in events | reverse | filter:filterByUID"> 
    <td>{{event.title}}</td> 
    <td class="col-md-2"> 
    <div class="btn-group" role="group" aria-label="actions"> 
     <button class="btn btn-primary" ng-click="go('events/show', event.UID)"> 
     <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 
     </button> 
     <button class="btn btn-primary" ng-click="events.$remove(event)"> 
     <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 
     </button> 
    </div> 
    </td> 
</tr> 

然后在你的JS文件

$scope.go = function (path, uid) { 
    $location.path(path + "/" + uid); 
}; 

.whenAuthenticated('/events/show/:eventId', { 
    templateUrl: 'views/eventShow.html', 
    controller: 'eventShowCtrl' 
}) 

然后查询火力点，说你有一个字段在您的对象uid中，您可以使用startAT和endAT方法。

See here for example

在这里，在角/火力地堡read more on filtering