使用角度显示来自Firebase的数据

时间:2015-04-04 20:36:33

标签: angularjs firebase

我正在尝试按照本教程显示帖子表:

http://code.tutsplus.com/tutorials/creating-a-web-app-from-scratch-using-angularjs-and-firebase--cms-22391

第5部分仍未发布,因此我将教程一直带到第4部分,并尝试构建post.html视图。然而,作为角度和火力基地的初学者,我真的很挣扎。

以下是我的post / post.js文件的代码:

'use strict';

angular.module('myApp.post', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
 $routeProvider.when('/post', {
templateUrl: 'post/post.html',
controller: 'PostCtrl'
 });
}])



.controller('PostCtrl', ['$scope','$firebase' ,       function($scope,$firebase) {
$scope.message = 'Hello World';
$scope.viewPost = function(){
    $scope.article.title = "";
    $scope.article.post = "";
    $scope.article= {};
    $scope.myData = new Firebase("https://glowing-fire-6133.firebaseio.com/Posts");
};

$scope.myData.on('value', function(snapshot){
    $scope.article = snapshot.val();

   });
}]);

这是我的post.html文件的代码

<title></title>

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="assets/css/blog.css" rel="stylesheet">


</head>


<body ng-controller="PostCtrl">
<h1>{{message}}</h1>

    <div ng-repeat="post in posts">
        <h2>{{article.title}}</h2>
        <div>{{article.post}}</div>
    </div>

</body>

</html>

我没有得到任何错误或结果。我确保添加

'myApp.post', //Post view

模块到app.js和index.html中的 但仍然没有。

我在做或丢失的东西真是愚蠢吗? I.E.登录DB等。

感谢您的耐心

## Addpost脚本
'use strict';

angular.module('myApp.addPost', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
 $routeProvider.when('/addPost', {
templateUrl: 'addPost/addPost.html',
controller: 'AddPostCtrl'
 });
}])

.controller('AddPostCtrl',     ['$scope','$firebase',function($scope,$firebase) {
$scope.AddPost = function(){
var title = $scope.article.title;
    var post = $scope.article.post;

var firebaseObj = new Firebase("https://glowing-fire-6133.firebaseio.com/Posts");
    var fb = $firebase(firebaseObj);

fb.$push({ title: title,post: post}).then(function(ref) {
    console.log(ref); 
}, function(error) {
    console.log("Error:", error);
});

}
}]);

1 个答案:

答案 0 :(得分:0)

$scope.posts在哪里?我在你的控制器中看不到它,所以没有什么可以循环的。

您应该$scope.posts = [/* a bunch of post objects*/];

我实际上看起来你应该做<div ng-repeat="post in myData">