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

这比我想象的要强硬，但整夜的会议解决了它。

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

带有用于按键访问对象的修复程序： 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>

Answer 2

我使用$ .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];
});

＆＃39;变化＆＃39;如果您在详细信息视图中创建和更新项目，则需要此部分。这将正确同步列表部分。

使用AngularJS和Firebase进行主详细信息视图路由

2 个答案: