AngularJS - ng-click重新初始化数据库对象

Question

我正在创建一个动态的单页论坛网站，使用AngularJS作为前端，Firebase作为后端。该页面由左侧的线程列表和右侧的线程内容组成。显示的线程内容基于从列表中选择的线程。

我可以从列表中成功选择一个线程并显示其内容。但是，从列表中选择一个线程时，列表中的所有其他线程都将成为所选线程的副本。这样，我的意思是所选线程的标题，注释和投票的属性值同时分配给所有其他线程中的相同属性，使它们全部相同。每个线程的ID不会改变。

有人可以告诉我一些导致此问题的原因吗？我无法识别代码中可能导致重新分配每个Firebase对象的属性值的任何内容。

以下是包含列表和线程内容部分的main.html页面

<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>

mainPageController

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();
    }

});

threadPageController

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
    }
});

threadService

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);
    };
});