Firebase 3，AngularFire 2在离子应用程序数据不更新实时/实时更新（与视频演示） [英] Firebase 3, AngularFire 2 in Ionic app data not updating real time / live update (with Video demo)

问题描述

Firebase以其实时数据更新而闻名，所以对我来说这是一个奇怪的现象。我使用的是Firebase 3（新​​的Firebase控制台应用程序。稍后添加验证）和AngularFire 2.我使用Ionic的选项卡模板启动应用程序，所以app.js的路由器配置应该是相同的。

有时，一个视图会加载数据，单击该添加属性按​​钮。

我上传了应用程序离子。 io使用离子视图在我的手机上试用它，并且在数据库将更新的情况下获得了相同的结果，但视图不会触发更改。 $ b

HTML（包含切换）：

 < ion-view view-title =Dashboard> 
< ion-content class =padding> 
< button class =button button-block button-positiveng-click =addProperty（）>添加测试属性< / button> 
< div class =listng-repeat =（key，property）in properties> 
 ng-false-value =关闭
< ion-toggle class =item item-dividerng-model =property.statusng-true-value = '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脚本（在开发期间这将是一个404） - > 
< script src =cordova.js>< / script> 
 
 <！ -  Firebase& AngularFire  - > //我试着保存并从本地加载
< 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> 
 //初始化Firebase 
 var config = {
 apiKey：API_KEY，
 authDomain：projectName.firebaseapp.com，
 databaseURL：https：/ /projectNamefirebaseio.com，
 storageBucket：projectName.appspot.com
}; 
 firebase.initializeApp（config）; 
< / script> 
 
<！ - 你的应用程序的js  - > 
< script src =js / app.js>< / script> 
< script src =js / controllers.js>< / script> 
< script src =js / services.js>< / script> 
  

Controller.js

 （$'code> controller（'DashCtrl'，function（$ scope）{
 var propertiesRef = firebase.database（）。ref（'properties'）; 
 
 propertiesRef.on 'value'，函数（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！）; $ b $ （b）}; 
}; 
 
 $ scope.togglePower = function（device，key）{
 propertiesRef.child（key）.update（{
status ：device.status 
））; 
}; 
}; 
  

让我知道是否需要额外的东西，我不能理解似乎是什么正如你所看到的，当你点击android应用程序中的切换时，所有的切换都会被更新。这是因为当你执行一个点击你触发摘要cicle

您应该在更新您的范围变量或将其包含在超时之后调用 $ scope。$ apply（） $ （'DashCtrl'，函数（$ scope，$ timeout）{
var propertiesRef = firebase.database（）。ref（''）
$ b $

 属性'）; 
 
 propertiesRef.on（'value'，function（data）{
 $ timeout（function（）{
 $ scope.properties = data.val（） ; 
}）
}，function（errorObject）{
 console.log（Error getting the properties：+ errorObject.code）; 
}）; 
 }; 
  

Firebase is known for its real-time data update, so this is a weird one for me.

I am using Firebase 3 (New firebase console app. Want to add authentication later) and AngularFire 2. I started the app using Ionic's tab template so the app.js' router config should be the same.

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

I have my ionic app served to the browser using 'ionic serve --lab' so I can see iOS and Android view.

• When I try to toggle data in one view (say iOS), the changes are instatly shown in firebase DB, but does now show immediately in the other view (Android) until I either toggle something, or change tabs in that view.

• On the other hand, if I make a change in the firebase DB, then neither of the two views are updated until I either person an action or change tabs for each view.

Few other observations:

• Sometimes on load, neither of the view has data loaded from firebase db until tabs are switched or 'Add Property' button is clicked for each view. (Least common)
• Sometimes, one view has the data loaded, while the other does not until tabs are switched or 'Add Property' button is clicked for that view.
• I uploaded the app to ionic.io to try it on my phone using ionic view, and I got same results where DB would update, but the views would not until a change was triggered.

HTML (containing toggles):

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

Let me know if any additional is needed. I am not able to understand what seems to be the issue.

解决方案

As you can see, when you click the toggle in the android app all the toggles gets updated. This is because when you perform a click you trigger the digest cicle

You should call $scope.$apply() after updating your scope variable, or wrapping it in a timeout

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，AngularFire 2在离子应用程序数据不更新实时/实时更新（与视频演示）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！