Javascript AngularJS-ng单击重新初始化数据库对象
我正在创建一个动态的单页论坛站点,使用AngularJS作为前端,Firebase作为后端。该页面由左侧的线程列表和右侧的线程内容组成。显示的线程内容基于从列表中选择的线程 我可以成功地从列表中选择一个线程并显示其内容。但是,当从列表中选择一个线程时,列表中的所有其他线程都将成为所选线程的副本。我的意思是,所选线程的标题、注释和投票的属性值同时分配给所有其他线程中的相同属性,使它们完全相同。每个线程的ID不会更改 谁能告诉我是什么导致了这个问题?我无法识别代码中会导致重新分配每个Firebase对象的属性值的任何内容 下面是main.html页面,其中包含列表和线程内容部分Javascript AngularJS-ng单击重新初始化数据库对象,javascript,angularjs,firebase,Javascript,Angularjs,Firebase,我正在创建一个动态的单页论坛站点,使用AngularJS作为前端,Firebase作为后端。该页面由左侧的线程列表和右侧的线程内容组成。显示的线程内容基于从列表中选择的线程 我可以成功地从列表中选择一个线程并显示其内容。但是,当从列表中选择一个线程时,列表中的所有其他线程都将成为所选线程的副本。我的意思是,所选线程的标题、注释和投票的属性值同时分配给所有其他线程中的相同属性,使它们完全相同。每个线程的ID不会更改 谁能告诉我是什么导致了这个问题?我无法识别代码中会导致重新分配每个Firebase
<div ng-controller="mainPageController">
<div>
<h3>
Welcome {{user.name}}! <button class="btn-danger img-rounded" ng-click="logout()" id="LogoutBtn">Logout</button>
</h3>
</div>
<div class="col-md-6">
<h2>All Threads</h2>
<div id="searchThreads" class="input-group col-md-5 img-rounded">
<input type="text" class="col-xs-5 form-control" ng-model="searchThread" placeholder="Search threads...">
</div>
<div id="addThread" class="input-group">
<input type="text" class="col-xs-5 form-control" ng-model="newThreadTitle" placeholder="New thread title..."/>
<button ng-click="addThread()">Add thread</button>
</div>
<!-- Thread List -->
<div>
<div ng-repeat="thread in threads | filter:searchThread | orderObjectBy:'votes'">
<button class="glyphicon glyphicon-chevron-up" ng-click="upvote(thread.$id, thread.votes)"></button> |
<button class="glyphicon glyphicon-chevron-down" ng-click="downvote(thread.$id, thread.votes)"></button>
<a href ng-click="showThread(thread)">{{thread.votes}}<span style="margin-left:1em"> {{thread.title}} by {{thread.username}}</span></a>
</div>
</div>
</div>
</div>
<!-- Thread content viiew -->
<div class="col-md-6">
<div ng-controller="threadPageController">
<h1>{{currentThread.title}} by {{currentThread.username}}</h1>
<div>
<input type="text" ng-model="newComment" placeholder="Write a comment..."/>
<button ng-click="addComment()">Add Comment</button>
</div>
<div>
<div ng-repeat="comment in currentThread.comments">{{comment.username}}: {{comment.text}}
</div>
<div ng-if="!currentThread.comments.length">There are no comments on this thread</div>
</div>
</div>
</div>
threadPageController
angular.module('richWebApp')
.controller('mainPageController', function($scope, $location, userService, threadService, fb, $firebaseAuth, $filter){
$scope.user = userService.getLoggedInUser();
$scope.newThreadTitle = '';
$scope.currentThreadId = '';
$scope.threads = threadService.getAllThreads();
$scope.threads.$loaded().then(function(){
console.log($scope.threads)
});
$scope.users = userService.getLoggedInUsers();
$scope.addThread = function(){
if(!$scope.newThreadTitle){
return false; //Don't do anything if the text box is empty
}
var newThread = {
title: $scope.newThreadTitle,
username: $scope.user.name,
comments: [],
votes: 0
};
$scope.threads.$add(newThread);
$scope.newThread = '';
$scope.newThreadTitle = ''; //Clear the text in the input box
}
$scope.showThread = function(thread) {
$scope.$emit('handleEmit', {id: thread.$id});
};
$scope.upvote = function(threadId, threadVotes) {
var newVotes = threadVotes + 1;
var ref = new Firebase(fb.url);
var threadRef = ref.child("threads");
threadRef.child(threadId).update({
votes: newVotes
});
}
$scope.downvote = function(threadId, threadVotes) {
var newVotes = threadVotes - 1;
var ref = new Firebase(fb.url);
var threadRef = ref.child("threads");
threadRef.child(threadId).update({
votes: newVotes
});
}
$scope.logout = function(){
userService.logout();
}
});
angular.module('richWebApp')
.controller('threadPageController', function($scope, $location, $routeParams, threadService, fb, userService){
$scope.$on('handleBroadcast', function (event, args) {
var threadId = args.id;
var currentThread = threadService.getThread(threadId);
currentThread.$bindTo($scope, 'currentThread') //creates $scope.thread with 3 way binding
});
$scope.newComment = '';
$scope.addComment= function(){
if(!$scope.newComment){
return false; //Don't do anything if the text box is empty
}
var currentUser = userService.getLoggedInUser();
var newComment = {
text: $scope.newComment,
username: currentUser.name
};
$scope.currentThread.comments = $scope.currentThread.comments || [];
$scope.currentThread.comments.push(newComment);
$scope.newComment = ''; //Clear the input box
}
});
线程服务
angular.module("richWebApp").service("threadService", function($firebaseArray, $firebaseObject, fb){
this.getAllThreads = function(){
var ref = new Firebase(fb.url + '/threads');
return $firebaseArray(ref);
};
this.getThread = function(threadId){
var ref = new Firebase(fb.url + '/threads/' + threadId);
return $firebaseObject(ref);
};
});
你能发布
threadService
的代码吗?@yarons我已经更新了我的原始帖子,加入了threadServiceisshowThread
你的代码中当前运行的是什么?由于它发出的事件的名称(以及您使用$emit
)与threadPageController
侦听的事件名称不匹配是,showThread发出选定线程的ID,然后在threadController文件中使用该ID。然后,threadController文件调用threadService文件中的getThread方法。该代码在从后端检索值方面非常有效。我最初将threadPageController和mainPageController合并到一个大文件中,没有$emit或$on,但我仍然存在此问题,因此我相信传递的值不是问题所在。我不确定是否清楚。您在主控制器中发出名为handleEmit
的事件,但在另一个控制器中捕获名为handleBroadcast
的事件。其中一个似乎已经过时了。