使用 AngularJS 和 Firebase 主细节视图路由

Question

我有一个视图，其中包含 ng-repeat 中的帖子列表。当用户单击帖子时，他们会被路由到所选帖子的详细信息页面。

我已经设置了一些路由，但是在弄清楚如何处理我注入控制器以使详细视图加载正确的帖子的 id 参数时遇到了问题。

我也不确定是否传递了正确的值作为帖子的标识符。这些帖子作为数组存储在 Firebase 中，我不确定在读入数据以存储 FIrebase id 时是否需要做一些事情。我加载的数据中没有明确的唯一标识符。

帖子列表视图：

<div id='posts' ng-controller="PostsCtrl">

      <ul>
          <div id='post' ng-repeat="post in posts track by $id($index)">
              <div id='postMedia'>
              <img id='media' ng-click="go('/post/{{$id}}')" ng-src=   {{post.attachment}} />
              </div>
              <div id="articleRight">
                  <div ng-click="go('/post')">{{post.message}}</div>

后控制器：

myApp.controller('PostsCtrl', ['$scope', 'angularFire', '$routeParams',
function ($scope, angularFire, $routeParams) {
var url = 'https://inviter-dev.firebaseio.com/posts';
$scope.items = angularFire(url, $scope, 'posts',  [] );
$scope.currentPost = $scope.items[$routeParams.postid]

帖子详情视图：

 <div class="container">

      <h1>{{$scope.$currentPost.message}}</h1>

      <ul>

              <div id='postMedia'>
              <img ng-click="" ng-src={{post.attachment}} />
              </div>
              <div ng-click="">
                  <div ng-click="">{{posts[$route.current.params.postid].message}}</div>

路由：

 $routeProvider.when('/post/:postid', {
    templateUrl:'partials/post.html',
    authRequired: true,
    controller:'PostsCtrl'
})

Answer 1

我使用 $.on 方法来监听控制器内部加载的数据。之后，只需将一个新的范围变量分配给我想要显示其详细信息的特定文章（帖子/项目）。

$scope.articles = $firebase(ref);

$scope.articles.$on("loaded", function() {
  $scope.article = $scope.articles[$routeParams.article_id];
});

$scope.articles.$on("change", function() {
  $scope.article = $scope.articles[$routeParams.article_id];
});

如果您在详细视图中创建和更新项目，则需要“更改”部分。这将正确同步列表部分。

Answer 2

这比我预期的要困难，但通宵的会议解决了它。

AngularFire 有一个分支，您需要通过 Firebase 生成的唯一密钥来访问 Firebase 对象。我将这个版本的 AngularFire.js 复制到我的项目中。但是，我发现官方 0.3 版本中缺少 AngularFIreAuth，因此我将其添加到其中，并为我正在运行的版本创建了下面的 Gist。希望很快会有新的正式版本-

Fork 修复了按键访问对象的问题： https://github.com/jeffreywescott/angularFire/blob/9aadb24e345e804ed31695787dd8f2360e8efdf2/angularFire.js

我的 AngularFire.js 版本： https://gist.github.com/wisemanIV/6275080

主视图需要使用ng-repeat键、值语法-

<div ng-controller="PostsCtrl">

      <ul>
          <div id='post' ng-repeat="(key, post) in posts">
              <div id='postMedia'>
              <img id='media' ng-click="go('post/{{key}}')" ng-src={{post.attachment}} />
              </div>
              <div id="articleRight" ng-click="go('/post')">
                  <div ng-click="go('/post')">{{post.message}}</div>

路由看起来像这样：

$routeProvider.when('/post/:postid', {
    templateUrl:'partials/post.html',
    authRequired: true,
    controller:'PostsCtrl'
})

这是控制器：

myApp.controller('PostsCtrl', ['$scope', 'angularFire', '$routeParams',
function ($scope, angularFire, $routeParams) {
var url = 'https://inviter-dev.firebaseio.com/posts';
$scope.items = angularFire(url, $scope, 'posts',  {} );

$scope.selectedItem = $routeParams.postid ;


$scope.getPost = function() {

     return $scope.posts[$scope.selectedItem]
}

这是详细视图：

 <div ng-controller="PostsCtrl" ng-init="post=getPost()">

      <ul>

              <div id='postMedia'>
              <img ng-click="" ng-src={{post.attachment}} />
              </div>
              <div ng-click="">
                  <div ng-click="">{{post.message}}</div>
                  <div ng-click="">{{post.created_at|since}}</div>
                  <div ng-click="">{{post.submitter}}</div>