使用 routeProvider 时，组 ID 未显示在 HTML 中答案

【问题标题】：Group id not showing up in HTML when using routeProvider使用 routeProvider 时，组 ID 未显示在 HTML 中
【发布时间】：2014-12-12 19:00:57
【问题描述】：

我在让 routeParams 为我的网站工作时遇到了一些困难。我试图显示一个组列表，能够选择一个组并被路由到具有该组特定详细信息的页面。我昨天问了一个类似的问题，但我不认为我确切知道要问什么。我现在设置的方式我只看到 '/#/viewgroup/:id' 在浏览器中而不是实际的 id 号，并且页面是空白的。感谢您的帮助！

路线：

 .whenAuthenticated('/viewgroup/:id', {
    templateUrl: 'views/groups/groupDetail.html',
    controller: 'GroupCtrl'
  })

索引.HTML：

<div class="col-md-4" ng-repeat="group in data.groups | filter: filterObject | filter: search">
<div class="panel panel-default">
  <div class="panel-heading">
    <h5 class="panel-title"><a href="#viewgroup/:id">{{group.name}}</a></h5>
  </div>

GROUPDETAIL.HTML：

<div ng-show="group in data.groups">
 <ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Groups</a></li>
    <li class="active">{{group.name}}</li>
 </ol>

GROUPCTRL：我只对数据使用“groups/data.json”，因为我不确定如何从 firebase 服务器中提取这些数据。从服务器拉取是我真正需要的。

creativeBillingApp.controller('GroupCtrl', ['$scope', 'groupsService', '$routeParams',  function( $scope, groupsService, $firebase, $routeParams, $http) {

$http.get('groups/data.json').success(function(data){
    angular.forEach(data, function(item) {
      if (item.id == $routeParams.groupId) 
        $scope.group = item;
    });
});

【问题讨论】：

您在这个问题中有很多活动部分，这导致我的回答解决了一个问题，但没有解决另一个问题。你能设置一个 plunkr/fiddle/bin 一次重现一个问题吗？
感谢弗兰克！我设置了一个 Plunker。它并不完全有效，但我相信它拥有我需要的所有代码。 plnkr.co/edit/PKRcoO7J1B947a6I0UF3?p=preview
您在这里没有提到您正在使用 angularFire-seed（即 whenAuthenticated() 是什么，因为这不是 $routeParams 方法），您的 plunkr 也没有显示此代码或重新创建问题。见creating an mcve

标签： angularjs firebase angularfire ngroute

【解决方案1】：

:id 语法仅在 routeProvider 中用于指示它应在 URL 中的何处查找 id 值。在视图中，您使用普通的{{}} 或ng-bind 表示法将id 值注入到生成的HTML 中。

假设您的groups 是某处$firebase(ref).$asArray() 的结果，您可以使用$id 访问每个项目的id 值。

因此，您现在在 index.html 中有 <a href="#viewgroup/:id"> 的地方，只需输入 <a href="#viewgroup/{{group.$id}}">。 Angular 在渲染模板时会用它代替组 ID。

【讨论】：

谢谢弗兰克！所以，我现在成功地将 id 输入到我的浏览器中，但模板没有出现，我没有在控制台中收到任何错误。
我通过添加 ng-show="group in data.groups" 修复了 groupdetail.html，现在模板出现了，但数据没有拉入页面。我收到此错误；错误：[$parse:syntax] 语法错误：标记“in”是表达式 [group in data.groups] 的第 7 列中的意外标记，从 [in data.groups] 开始......
in的正确用法是与ng-repeat。在ng-show="group in data.groups" 中使用它是无效的角度语法。