循环$ id从Firebase后端生成自定义的唯一页面数据

Question

我在AngularJS和Firebase中创建了一个博客。 我遇到的问题是，当用户点击指向写在后端Firebase中的特定博客帖子的链接时，我试图成功呈现唯一页面数据。

我的火力点的数据是“HTTPS：ngblogapp.firebaseio.com/posts”

这里是一个可视化我的图书馆

我渲染后与NG重复的网页链接=“帖子“帖子指的是firebase库。 这是一个视觉。

当我点击我得到一个页面一个唯一的URL标识的链接之一，因为这样的“”“http://localhost:7000/#/post/-K0T3PqoCBVygt_LCCHF‘’”但独特的页面显示的数据为这种

让我带你到我的JavaScript。

var app=angular.module('myBlogApp', 
[ 
'ngRoute', 
'app.controllers', 
'app.directives', 
'firebase' 
]) 
.constant('FBURL', "https://ngblogapp.firebaseio.com/posts") //fburl 
.config(['$routeProvider', function($routeProvider){ 
    $routeProvider.when('/',{ 
     templateUrl: '../views/posts.html', 
     controller: 'postController' 
    }).when('/post/:postId',{ 
     templateUrl:'../views/singlepost.html', 
     controller: 'postController' 
    }).when('/page/:postId',{ 
     templateUrl:'../views/page.html', 
     controller: 'postController' //'PageController' 
    }).when('/create',{ 
     templateUrl:'../views/createaPost.html', 
     controller:'postController' 
    }).otherwise({ 
     redirectTo: '/' 
    }); 
} 
]); 
app.factory("Blog",["$firebaseArray","$routeParams", function($firebaseArray, $routeParams){ 

var ref = new Firebase("https://ngblogapp.firebaseio.com/posts");// FIREBASE OBJ 
var blogPostsArray = $firebaseArray(ref); 
    return{ 

    id: $routeParams.postId, 

    allPosts: blogPostsArray, // all fb objects 

    addPost: function(newpost){ 
     newpost.datetime = Firebase.ServerValue.TIMESTAMP; 
     return blogPostsArray.$add(newpost); //push to array 
    } 

}; 

}]); 



app.controller('postController',["$scope",  "$location","$routeParams","Blog","FBURL", "$firebaseObject" ,function($scope,$location,$routeParams,Blog,FBURL,$firebaseObject){ 

$scope.posts = Blog.allPosts; //All blog posts 
var postId = $routeParams.postId; 

if(postId){ 
$scope.selectedPost = getPost(postId); 
} 

function getPost(postId){ 
var ref = new Firebase(FBURL + postId); 
return $firebaseObject(ref); 
} 

$scope.addPost = function(newpost){ 
Blog.addPost($scope.newpost); 
//$location.path('/'); //redirects to home page 
console.log(newpost); 
console.log($scope.posts); // all posts 
$scope.newpost ={}; //reset the message 
}; 

$scope.currentPost = function(postId){ 
Blog.getPost(postId); 
console.log(postId); 
}; 

}]); 

在'postController'中我有一个名为getPost（postId）的方法，它带有一个参数postId。 我postId assgined分配给一个routeParam像这样postId = $ routeParams.id。 。

在我的HTML部分我通过帖子循环$ ID如下：

<div class="container"> 
<div class="col-md-offset-9 col-md-3"> 
<!--span(class="glyphicon glyphicon-search" aria-hidden="true")--> 
<input type="text" ng-model="searchPost" placeholder="Search" class="form-control"/> 
</div> 
<article ng-repeat="post in posts | filter: searchPost | orderBy: date:'medium' "> 
<h1 class="page-header"><a ng-href="#/post/{{post.$id}}">{{post.title}} 
    <h3>{{post.text | limitTo: 30}}{{post.text.length > 30? "...": ""}}   <i>{{post.datetime | date:short}}</i></h3></a></h1> 
</article> 
</div> 

同样，这使得该ID的网址，但指引我到一个时髦的对象

{"$id":"posts-K0T3PqoCBVygt_LCCHF","$priority":null,"$value":null}

我不知道什么是正确的API调用来获取对象的唯一ID并显示其与AngularFire的内容。任何建议都会很棒。

Answer 1

我认为你只是缺少基于https://docs.angularjs.org/api/ngRoute/service/ $ routeParams一个斜线

var postId = $routeParams.postId; 

它返回的参数值的对象，而斜线

function getPost(postId){ 
    // FBURL + postId = ...firebaseio.com/posts-K0T3PqoCBVygt_LCCHF 
    // FBURL + '/' + postId = ...firebaseio.com/posts/-K0T3PqoCBVygt_LCCHF 
    var ref = new Firebase(FBURL + postId); 
    return $firebaseObject(ref); 
} 

所以恕我直言修复是new Firebase(FBURL + '/' + postId)，但我无法测试它（或重现）。