javascript - 如何在不从Firebase重新加载页面的情况下进行数据更新

我正在尝试实现一个简单的收藏夹系统。在页面上，加载文章列在主页上，任何以前喜欢的名为nubs的文章都会在下面显示FAVED标签。

<div class="list-group" ng-repeat="nub in nubs">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">{{nub.title}}</h4>
    <p class="list-group-item-text">{{nub.description}}</p>
    <p class="list-group-item-text">{{nub.synopsis}}</p>
    <li ng-repeat="url in nub.attachmentsUrls">
      <p class="list-group-item-image">
        <img ng-src={{url}} />
      </p>
    </li>
  </a>
  <button ng-click="toggleFav(nub)">favorite</button>
  <p ng-show="getFaved(nub.$id)">FAVED</p>
</div>

这是工作，但当我添加到我的最爱的网页不更新，以反映最新的喜爱的文章。我想让我的页面积极响应toggleFav函数。
这是我的控制器

var ref = new Firebase("https://xxxxx.firebaseio.com");
var auth = ref.getAuth();

var nubRef = new Firebase("https://xxxxx.firebaseio.com/Nubs");
var nubs = $firebaseArray(nubRef);
$scope.nubs = nubs;

var userRef = new Firebase("https://xxxxx.firebaseio.com/users");
var users = $firebaseArray(userRef);
$scope.users = users;

// Array of booleans for favorites
$scope.favedArray = [];

// Array of user ids for
$scope.userIdArray = [];

var userFavs = $firebaseArray(userRef.child(auth.uid).child("favorites"));
$scope.userFavs = userFavs;

userFavs.$loaded()
.then
(
  function()
  {
    nubs.$loaded()
    .then
    (
      function()
      {
        $scope.tempFaved = [];
        $scope.tempId = [];
        console.log(userFavs);

        angular.forEach
        (
          nubs,
          function(nub)
          {
            $scope.tempFaved.push(false);
            $scope.tempId.push(nub.$id);
            console.log($scope.tempId);

            angular.forEach
            (
              userFavs,
              function(favs)
              {
                console.log($scope.tempFaved);
                if(favs.nub == nub.$id)
                {
                  $scope.tempFaved.pop();
                  $scope.tempFaved.push(true);
                  console.log($scope.tempFaved);
                }
              }
            );
          }
        );

        while($scope.tempFaved.length > 0)
        {
          $scope.favedArray.push($scope.tempFaved.pop());
          $scope.userIdArray.push($scope.tempId.pop());
        }
            $scope.getFaved = function(nubId)
              {
                console.log($scope.favedArray[$scope.userIdArray.indexOf(nubId)]);
                $scope.faved = $scope.favedArray[$scope.userIdArray.indexOf(nubId)];
                return $scope.faved;
              }

            $scope.toggleFav = function(nub)
              {
                var nubFavRef = nubRef.child(nub.$id).child("favorites");
                var nubFavs = $firebaseArray(nubFavRef);
                var faved = $scope.getFaved(nub.$id)
                console.log(faved);
                if (faved == false)
                  {
                    nubFavs.$add
                    (
                      {
                        user: auth.uid
                      }
                    );
                    userFavs.$add
                    (
                      {
                        nub: nub.$id
                      }
                    )
                  console.log("favorited");
                  }
                else
                {
                  nubFavs.$remove(auth.uid);
                  userFavs.$remove(nub.$id);
                  console.log("unfavorited");
                }
              };
            }
          )
        }
      );

实际上，它是在页面上显示的nub或post之间循环，并根据用户喜欢的nub检查它们，以显示FAVED标记并切换favorite按钮的功能。如果用户没有偏好的nub，按钮会将nub添加到他们的收藏夹列表中，并将其添加到偏好的nub的用户列表中，如果用户有偏好的post，按钮会将其删除。
toggleFav的不利功能也不起作用，所以这方面的帮助也值得赞赏，但这是一个能够访问faved数组的正确子数组的问题，我不知道该怎么做。
我认为页面需要更新正确的信息，当某个东西受到青睐时，需要某种$on listener，但我不确定如何实现它。

最佳答案

/* How store data in fire base:
{
	"home" : {
			"room1" : {
					  "status" 		: "true",
					  "switch_name" : "light 2",
					  "user_id" 	: "-Kvbk-XHqluR-hB8l2Hh"
			}
	}
}
*/
//select element in which you want real time data.
const preObject = document.getElementById('tbl_switch_list');

//select your root table name
const dbRefObject = firebase.database().ref().child('home');

//Change Value in Firebase and view in your console.
dbRefObject.on('value',snap => console.log('Response : ',snap.val());

<h3>Switch List</h3>
<table id="tbl_switch_list" border="1">
    <thead>
				<tr>
						<td>#ID</td>
						<td>#switchName</td>
						<td>#status</td>
				</tr>
		<thead>
		<tbody id="list"></tbody>
</table>