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

Firebase以其实时数据更新而闻名，所以这对我来说是个奇怪的问题

我正在使用Firebase 3（新的Firebase控制台应用程序。希望稍后添加身份验证）和AngularFire 2。我使用爱奥尼亚的标签模板启动了这个应用程序，所以app.js的路由器配置应该是相同的

我使用“ionic serve--lab”将我的ionic应用程序安装到浏览器上，这样我就可以查看iOS和Android视图

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

• 另一方面，如果我在firebase DB中进行了更改，则在为每个视图创建操作或更改选项卡之前，这两个视图都不会更新

很少有其他意见：

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

HTML（包含切换）：

---

如果需要任何额外的帮助，请告诉我。我无法理解问题的症结所在。

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

更新范围变量或将其包装在超时后，应调用

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

---

谢谢你，德维德。我认为这是有效的。我会再做一些测试，然后接受你的答案。你知道为什么会发生这种情况，因为Firebase 2.4.2和Angularfire 1.2不需要超时。还有，有没有可能在没有延迟承诺或其他什么的情况下替换超时？我建议你，在这里抢夺一点战利品。“问题”是由Angular的消化循环引起的。有时你不得不告诉Angular刷新视图，Angular总是发生在我身上：）

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

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