循環$ 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)，但我無法測試它（或重現）。