Ionic 应用程序数据中的 Firebase 3、AngularFire 2 未实时更新/实时更新（带视频演示）

Question

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

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

Click here to see a (90 second) video demo of the issue

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

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

• 另一方面，如果我在 firebase 数据库中进行更改，则在我为每个视图执行操作或更改选项卡之前，两个视图都不会更新。

其他一些观察：

• 有时在加载时，两个视图都没有从 firebase db 加载数据，直到切换选项卡或为每个视图单击“添加属性”按钮。 （最不常见）
• 有时，一个视图加载了数据，而另一个视图直到切换选项卡或单击该视图的“添加属性”按钮后才加载。
• 我将应用程序上传到 ionic.io 以在我的手机上使用 ionic 视图进行尝试，我得到了相同的结果，其中 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>

索引.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
      });
    };
};

如果需要任何补充，请告诉我。我无法理解似乎是什么问题。

Answer 1

如您所见，当您单击 android 应用程序中的切换时，所有切换都会更新。这是因为当您执行点击时会触发digest cicle

您应该在更新范围变量后调用$scope.$apply()，或者将其包装在超时中

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

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