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'将我的离子应用程序提供给浏览器，因此我可以看到iOS和Android视图。

当我尝试在一个视图（例如iOS）中切换数据时，更改会在firebase数据库中显示，但现在会立即显示在另一个视图（Android）中，直到我切换某些内容或更改选项卡在那种观点中。
另一方面，如果我在firebase数据库中进行了更改，那么在我执行操作或更改每个视图的选项卡之前，两个视图都不会更新。

很少有其他观察结果：

有时在加载时，在切换选项卡或为每个视图单击“添加属性”按钮之前，视图都没有从firebase db加载数据。（最不常见）
有时，一个视图加载了数据，而另一个视图加载了数据，直到切换标签或单击该视图的“添加属性”按钮。
我将应用程序上传到ionic.io以使用离子视图在我的手机上进行尝试，并且我在数据库更新时获得相同的结果，但直到更改被触发才会显示视图。

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

如果需要任何其他内容，请与我们联系。我无法理解似乎是什么问题。

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

Firebase 3，Ionic app数据中的AngularFire 2无法更新实时/实时更新（使用视频演示）

1 个答案: