Firebase 3, AngularFire 2 in ionischen App-Daten nicht aktualisiert Echtzeit/Live-Update (mit Video-Demo)

Question

Firebase ist für seine Echtzeit-Datenaktualisierung bekannt, so dass dies für mich ein komisches ist.

Ich benutze Firebase 3 (Neue Firebase Konsole App. Möchte später Authentifizierung hinzufügen) und AngularFire 2. Ich startete die App mit Ionics Tab-Vorlage, so dass die Router-Konfiguration der App.js identisch sein sollte.

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

Ich habe meine ionische App an den Browser ‚ionische dienen --lab‘ mit serviert, so kann ich iOS- und Android-Ansicht sehen.

• Wenn ich versuche, Daten in einer Ansicht zu wechseln (sagen iOS), werden die Änderungen instatly in Feuerbasis DB gezeigt, aber zeigen nun sofort in der anderen Ansicht (Android), bis ich entweder umschalten etwas oder ändern Registerkarten in dieser Ansicht.

• Auf der anderen Seite, wenn ich eine Änderung in der Firebase DB mache, dann wird keine der beiden Ansichten aktualisiert, bis ich entweder eine Aktion personle oder Tabs für jede Ansicht ändere.

Nur wenige andere Beobachtungen:

• Manchmal auf Last, hat weder die Ansicht Daten von Feuerbasis db geladen, bis die Halterungen eingeschaltet werden oder ‚Eigenschaft hinzufügen‘ Taste wird für jede Ansicht geklickt. (Am wenigsten verbreitet)
• Manchmal werden in einer Ansicht die Daten geladen, in der anderen erst, wenn die Registerkarten gewechselt werden oder die Schaltfläche 'Eigenschaft hinzufügen' für diese Ansicht angeklickt wird.
• hochgeladen ich die app, es zu versuchen auf meinem Handy ionic.io ionische Ansicht verwenden, und ich habe dieselben Ergebnisse in dem DB aktualisieren würde, aber die Aussicht würde erst eine Veränderung ausgelöst.

HTML (mit Knebel):

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

Lassen Sie mich wissen, ob eine zusätzliche benötigt wird. Ich bin nicht in der Lage zu verstehen, was das Problem zu sein scheint.

Answer 1

Wie Sie sehen können, wenn Sie auf den Schalter in der Android-App klicken, werden alle Schalter aktualisiert. Dies liegt daran, wenn Sie einen Klick führen Sie die Sie digest cicle

auslösen $scope.$apply() nach dem Umfang variable Aktualisierung nennen sollten, oder es in einem 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); 
    }); 
};