Hello all,

I'm starting to learn a lot of things related to the hybrid apps coding. I
decided to go on and use Ionic framework, based on AngularJS (this gives me
the occasion to learn it), and use Firebase as my backend solution.

I want to setup a map in my app, so I would locate the user and some points
of interests around him. I found out GeoFire existed, so I started working
with it.

My problem : I fail in displaying a user's location saved into Firebase. I
query it using GeoFire, and get the response (console.log it) but it won't
update the scope variable.

Here is the JS code :

myApp.factory("MyLoc", function(){
     var firebaseRef = new Firebase("https://myfirebase.firebaseio.com/geofire/");
     var geoFire = new GeoFire(firebaseRef);

     /* geoFire.set("user_loc", [37.785326, -122.405696]).then(function() {
      console.log("Provided key has been added to GeoFire");
      }, function(error) {
      console.log("Error: " + error);
      });*/

      return geoFire.get("user_loc").then(function(location) {
         if (location === null) {
             console.log("Provided key is not in GeoFire");
             return 0;
         }
         else {
             console.log("Provided key has a location of " + location);
             return location;
         }
     }, function(error) {
         console.log("Error: " + error);
         return 0;
     });
})

myApp.controller("firstCtrl", function($scope, MyLoc) {
     $scope.data = {};

     $scope.data.myLoc = MyLoc;
});


The HTML just displays it :

{{data.myLoc}}



Since I'm an Angular N00b, I guess I'm missing something obvious. I guess I
should use a promise or something similar, just can't figure out how ! Can
someone help me, please ? :)

Thank you very much bros !

--
You received this message because you are subscribed to the Google Groups "Firebase + AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-angular+unsubscribe@googlegroups.com.
To post to this group, send email to firebase-angular@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/9a4bd693-cc7f-4c13-b327-5e4d1427247f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Search Discussions

  • Georges Boris at Nov 13, 2014 at 6:51 pm
    hey jeremy,

    for the {{}} directive to appear your app should not have been
    bootstrapped. (inserting ng-app in your container element - html or body,
    usually)
    either that or you're adding html without the angular parser to have a look
    at it before. are you using something like jquery do add html content?
    the {{}} should always be evaluated and, if trying to access a non existant
    element, it should only disappear. never show up unaltered in the html.

    either way it seems like an angular issue not a firebase one..
    if you'd like to explain it in more detail on an stackoverflow question I'd
    be happy to help!

    cheers

    --
    You received this message because you are subscribed to the Google Groups "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/857f6faa-4682-49b2-8d29-3cc61de825bf%40googlegroups.com.
    For more options, visit https://groups.google.com/d/optout.
  • Jeremy Belolo at Nov 14, 2014 at 6:50 pm
    Hey Georges, and thanks for your help,

    I'm sorry, I wasn't clear. The HTML actually displays :

    Ma localisation : {"n":1,"i":[]}
    >

    I posted the code I wrote.

    You're right, it's more an angular issue, but since it uses GeoFire and I
    can't figure out how to wait for the answer to come from Angular... It fits
    here, espacially knowing I'm also using AngularFire. I was thinking of
    using this also :

    https://github.com/mikepugh/AngularGeoFire

      But the given examples get the data in the controller itself, and I'm here
    to understand how to get it from a service (or factory).


    Le jeudi 13 novembre 2014 20:51:03 UTC+2, Georges Boris a écrit :
    hey jeremy,

    for the {{}} directive to appear your app should not have been
    bootstrapped. (inserting ng-app in your container element - html or body,
    usually)
    either that or you're adding html without the angular parser to have a
    look at it before. are you using something like jquery do add html content?
    the {{}} should always be evaluated and, if trying to access a non
    existant element, it should only disappear. never show up unaltered in the
    html.

    either way it seems like an angular issue not a firebase one..
    if you'd like to explain it in more detail on an stackoverflow question
    I'd be happy to help!

    cheers
    --
    You received this message because you are subscribed to the Google Groups "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/4045414a-cfb4-4ae4-b23c-2db8a83db345%40googlegroups.com.
    For more options, visit https://groups.google.com/d/optout.
  • Jeremy Belolo at Nov 15, 2014 at 11:25 pm
    Okay so, here is the answer !

    MyLoc.then(function(data){
       $scope.data.myLoc = data;
    });


    However I had to use

    $scope.$apply();

    for the HTML to display it, apparently it doesn't updates right away. Do
    you have any idea why ? I understand Angular has to be notified of a change
    for it to display, as explained very nicely here :
    http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

    What I don't understand, is why it's the case here ? Why is Angular unaware
    of the change ?

    Thanks again !


    Le vendredi 14 novembre 2014 00:29:33 UTC+2, Jeremy Belolo a écrit :
    Hey Georges, and thanks for your help,

    I'm sorry, I wasn't clear. The HTML actually displays :

    Ma localisation : {"n":1,"i":[]}
    I posted the code I wrote.

    You're right, it's more an angular issue, but since it uses GeoFire and I
    can't figure out how to wait for the answer to come from Angular... It fits
    here, espacially knowing I'm also using AngularFire. I was thinking of
    using this also :

    https://github.com/mikepugh/AngularGeoFire

    But the given examples get the data in the controller itself, and I'm
    here to understand how to get it from a service (or factory).


    Le jeudi 13 novembre 2014 20:51:03 UTC+2, Georges Boris a écrit :
    hey jeremy,

    for the {{}} directive to appear your app should not have been
    bootstrapped. (inserting ng-app in your container element - html or body,
    usually)
    either that or you're adding html without the angular parser to have a
    look at it before. are you using something like jquery do add html content?
    the {{}} should always be evaluated and, if trying to access a non
    existant element, it should only disappear. never show up unaltered in the
    html.

    either way it seems like an angular issue not a firebase one..
    if you'd like to explain it in more detail on an stackoverflow question
    I'd be happy to help!

    cheers
    --
    You received this message because you are subscribed to the Google Groups "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/9574f11c-eade-440d-8b01-9a5273329346%40googlegroups.com.
    For more options, visit https://groups.google.com/d/optout.
  • Georges Boris at Nov 16, 2014 at 3:22 am
    Usually, angular does not wraps callbacks of async functions with $scope.$apply(), unless specified like in libs like angularfire.

    Enviado via meu smartphone
    Le 15/11/2014 à 20:25, Jeremy Belolo <jerryone3@gmail.com> a écrit :

    Okay so, here is the answer !

    MyLoc.then(function(data){
    $scope.data.myLoc = data;
    });

    However I had to use

    $scope.$apply();

    for the HTML to display it, apparently it doesn't updates right away. Do you have any idea why ? I understand Angular has to be notified of a change for it to display, as explained very nicely here : http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

    What I don't understand, is why it's the case here ? Why is Angular unaware of the change ?

    Thanks again !


    Le vendredi 14 novembre 2014 00:29:33 UTC+2, Jeremy Belolo a écrit :
    Hey Georges, and thanks for your help,

    I'm sorry, I wasn't clear. The HTML actually displays :
    Ma localisation : {"n":1,"i":[]}
    I posted the code I wrote.

    You're right, it's more an angular issue, but since it uses GeoFire and I can't figure out how to wait for the answer to come from Angular... It fits here, espacially knowing I'm also using AngularFire. I was thinking of using this also :

    https://github.com/mikepugh/AngularGeoFire

    But the given examples get the data in the controller itself, and I'm here to understand how to get it from a service (or factory).


    Le jeudi 13 novembre 2014 20:51:03 UTC+2, Georges Boris a écrit :
    hey jeremy,

    for the {{}} directive to appear your app should not have been bootstrapped. (inserting ng-app in your container element - html or body, usually)
    either that or you're adding html without the angular parser to have a look at it before. are you using something like jquery do add html content?
    the {{}} should always be evaluated and, if trying to access a non existant element, it should only disappear. never show up unaltered in the html.

    either way it seems like an angular issue not a firebase one..
    if you'd like to explain it in more detail on an stackoverflow question I'd be happy to help!

    cheers
    --
    You received this message because you are subscribed to a topic in the Google Groups "Firebase + AngularJS" group.
    To unsubscribe from this topic, visit https://groups.google.com/d/topic/firebase-angular/KprXMZyeglQ/unsubscribe.
    To unsubscribe from this group and all its topics, send an email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/9574f11c-eade-440d-8b01-9a5273329346%40googlegroups.com.
    For more options, visit https://groups.google.com/d/optout.
    --
    You received this message because you are subscribed to the Google Groups "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/77D23D6A-E4E9-467B-AD61-261EC2F3CF15%40gmail.com.
    For more options, visit https://groups.google.com/d/optout.

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupfirebase-angular @
postedNov 13, '14 at 5:07p
activeNov 16, '14 at 3:22a
posts5
users2

2 users in discussion

Jeremy Belolo: 3 posts Georges Boris: 2 posts

People

Translate

site design / logo © 2021 Grokbase