Firebase 以其实时数据更新而闻名，所以这对我来说很奇怪。

我正在使用 Firebase 3（新​​的 Firebase 控制台应用程序。希望稍后添加身份验证）和 AngularFire 2。我使用 Ionic 的选项卡模板启动了该应用程序，因此 app.js 的路由器配置应该相同。

单击此处查看该问题的（90 秒）视频演示

我使用“ionic serve --lab”将我的 ionic 应用程序提供给浏览器，以便我可以看到 iOS 和 Android 视图。

• 当我尝试在一个视图（例如 iOS）中切换数据时，更改会立即显示在 firebase DB 中，但现在会立即显示在另一个视图（Android）中，直到我切换某些内容或更改该视图中的选项卡视图。

• 另一方面，如果我在 firebase 数据库中进行更改，那么这两个视图都不会更新，直到我执行操作或更改每个视图的选项卡。

其他一些观察：

• 有时在加载时，两个视图都没有从 firebase db 加载数据，直到切换选项卡或单击每个视图的“添加属性”按钮。（最不常见）
• 有时，一个视图已加载数据，而另一个视图则未加载数据，直到切换选项卡或单击该视图的“添加属性”按钮。
• 我将应用程序上传到 ionic.io，使用 ionic view 在手机上试用，结果相同，DB 会更新，但视图不会更新，直到触发更改。

HTML（包含切换):

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <button class="button button-block button-positive" ng-click="addProperty()">Add Test Property</button>
    <div class="list" ng-repeat="(key, property) in properties">
      <ion-toggle class="item item-divider" ng-model="property.status" ng-true-value="'on'"
        ng-false-value="'off'" ng-change="togglePower(property, key)"> {{ property.name }}
      </ion-toggle>
    </div>
  </ion-content>
</ion-view>

Index.html

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- Firebase & AngularFire --> // I tried saving them and loading from locally
<script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"></script>

<script>
  // Initialize Firebase
  var config = {
    apiKey: "API_KEY",
    authDomain: "projectName.firebaseapp.com",
    databaseURL: "https://projectNamefirebaseio.com",
    storageBucket: "projectName.appspot.com"
  };
  firebase.initializeApp(config);
</script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>

Controller.js

controller('DashCtrl', function ($scope) {
    var propertiesRef = firebase.database().ref('properties');

    propertiesRef.on('value', function (data) {
      $scope.properties = data.val();
    }, function (errorObject) {
      console.log("Error getting the properties: " + errorObject.code);
    });

    var id = 0;
    $scope.addProperty = function () {
      propertiesRef.push({
        name: "Test " + id++,
        status: "on"
      }).then(function () {
        console.log("Property Added!");
      });
    };

    $scope.togglePower = function (device, key) {
      propertiesRef.child(key).update({
        "status": device.status
      });
    };
};

如果需要任何其他内容，请告诉我。我不明白问题出在哪里。