Javascript AngularJS-ng单击重新初始化数据库对象

Javascript AngularJS-ng单击重新初始化数据库对象,javascript,angularjs,firebase,Javascript,Angularjs,Firebase,我正在创建一个动态的单页论坛站点,使用AngularJS作为前端,Firebase作为后端。该页面由左侧的线程列表和右侧的线程内容组成。显示的线程内容基于从列表中选择的线程 我可以成功地从列表中选择一个线程并显示其内容。但是,当从列表中选择一个线程时,列表中的所有其他线程都将成为所选线程的副本。我的意思是,所选线程的标题、注释和投票的属性值同时分配给所有其他线程中的相同属性,使它们完全相同。每个线程的ID不会更改 谁能告诉我是什么导致了这个问题?我无法识别代码中会导致重新分配每个Firebase

我正在创建一个动态的单页论坛站点,使用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>
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我已经更新了我的原始帖子,加入了threadServiceis
showThread
你的代码中当前运行的是什么?由于它发出的事件的名称(以及您使用
$emit
)与
threadPageController
侦听的事件名称不匹配是,showThread发出选定线程的ID,然后在threadController文件中使用该ID。然后,threadController文件调用threadService文件中的getThread方法。该代码在从后端检索值方面非常有效。我最初将threadPageController和mainPageController合并到一个大文件中,没有$emit或$on,但我仍然存在此问题,因此我相信传递的值不是问题所在。我不确定是否清楚。您在主控制器中发出名为
handleEmit
的事件,但在另一个控制器中捕获名为
handleBroadcast
的事件。其中一个似乎已经过时了。