Динамическая маршрутизация 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); 
    }; 

на моих маршрутах.js У меня есть:

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

Все работает до сих пор.

Однако для меня неясно, как передать идентификатор события на страницу eventShow.html, поэтому я знаю, какой элемент был нажат из списка индексов, чтобы я мог отображать подробную информацию?

Моя firebase база данных выглядит следующим образом:

Answer 1

Заканчивать UI-маршрутизатор, он делает динамическую маршрутизацию гораздо проще

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

Но если вы хотите, чтобы сохранить то, что у вас есть , вы должны передать идентификатор события на свой путь, например

$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' 
}) 

Тогда вы можете просто использовать идентификатор при вызове функции:

go('events/:id') 

Here's a great tutorial (и я настоятельно рекомендую смотреть все обеих частей).

И у вас будут более удобные URL-адреса, которые можно пометить в закладки.

Answer 3

Один можно передать UID (UID это просто пример для идентификатора пользователя) 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' 
}) 

Тогда для запроса firebase, скажем, у вас есть поле в ваших объектах, называемых uid, вы можете использовать методы startAT и endAT.

See here for example

А вот read more on filtering