FAQ
Hello,

I have a webpage with an associated controller. When I request the
corresponding route (I use ui-route), the view is shown, the data is
rertieved from FireBase location (I can see via console.log) but tHe
retrieved data is not shown in tHe view. Only when I manually switch to
another page - generating a $routeChange event - and I come back to The
initial page, the data is displayed.
This is what I have:

app.js - the ui-router part:
.config(['$stateProvider','$urlRouterProvider',function ($stateProvider,
$urlRouterProvider) {
  $urlRouterProvider.otherwise('main');
  $stateProvider
  .state('main', {
  url: '/main',
  templateUrl: 'views/main.html',
  controller: 'MainCtrl'
  })
  .state('aanvragen', {
  url: '/aanvragen',
  templateUrl: 'views/aanvragen.html',
  controller: 'AanvraagCtrl'
  })
  .state('aanvraag', {
  url: '/aanvraag',
  templateUrl: 'views/aanvraag.html',
  controller: 'AanvraagCtrl'
  })
  .state('about', {
  url: '/about',
  templateUrl: 'views/about.html',
  controller: 'MainCtrl'
  })
  .state('contact', {
  url: '/contact',
  templateUrl: 'views/contact.html',
  controller: 'MainCtrl'
  });
  }
]);

controller AanvraagCtrl.js:
angular.module('iLeadsApp')
.controller('AanvraagCtrl', function($scope,FIREBASE_URL) {
  var FBRefAanvragen = new Firebase(FIREBASE_URL + 'aanvragen');

  FBRefAanvragen.on('value',function(snap){
  $scope.aanvragen = snap.val();
  });


  $scope.addAanvraag = function(aanvraag){
  FBRefAanvragen.push(aanvraag);
  };


  $scope.removeAanvraag = function(aanvraag){
  FBRefAanvragen.push(aanvraag);
  };
   });
view aanvragen.html:
<table class="table table-bordered">
  <thead>
  <tr>
  <th>Datum</th>
  <th>Agency</th>
  <th>Contactpersoon</th>
  <th>&nbsp;</th>
  </tr>
  </thead>
  <tr ng-repeat="aanvraag in aanvragen">
  <td>{{aanvraag.datum}}</td>
  <td>{{aanvraag.agency}}</td>
  <td>{{aanvraag.contactpersoon}}</td>
  <td>edit ({{aanvraag.name()}})</td>
  </tr>
</table>

If I request a page with this url: *http://ileads.local/#/aanvragen *the
view displays but ng-repeat generates no data. Only when I navigate to
another view (e.g. about) and back the snapshot data is displayed by
ng-repeat...
Why is that? Isn't
FBRefAanvragen.on('value',function(snap){ $scope.aanvragen = snap.val();
  });
also executed on initial page load?

--
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/640ece82-3e2a-4880-99d0-6d51025ba13e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Search Discussions

  • Jacob Wenger at Jul 9, 2014 at 6:49 am
    Hi Marc,

    To answer your last question, yes, the on("value") event listener is
    execute on initial page load. It seems like you have confirmed this by the
    fact that you say that if you console.log() inside of the it, you see the
    correct data.

    As far as why you don't see it in ng-repeat, I unfortunately don't have a
    good answer for you. It's odd that you say it works when you navigate back
    to the page. I would expect it to either not work at all or to always work.
    I'm not too familiar with the ui-route in Angular, but maybe that is
    causing some issue here. Maybe for some reason the Angular $digest loop is
    not being run when you initially navigate to the page...

    Marc, it would be super helpful to get a repro of this bug in a JSFiddle or
    Plunkr. Could you put that together and send us a link?

    Kato, do you have any suggestions here/have you seen this before?

    Jacob
    On Sunday, July 6, 2014 2:52:14 PM UTC-7, Marc B wrote:

    Hello,

    I have a webpage with an associated controller. When I request the
    corresponding route (I use ui-route), the view is shown, the data is
    rertieved from FireBase location (I can see via console.log) but tHe
    retrieved data is not shown in tHe view. Only when I manually switch to
    another page - generating a $routeChange event - and I come back to The
    initial page, the data is displayed.
    This is what I have:

    app.js - the ui-router part:
    .config(['$stateProvider','$urlRouterProvider',function ($stateProvider,
    $urlRouterProvider) {
    $urlRouterProvider.otherwise('main');
    $stateProvider
    .state('main', {
    url: '/main',
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
    })
    .state('aanvragen', {
    url: '/aanvragen',
    templateUrl: 'views/aanvragen.html',
    controller: 'AanvraagCtrl'
    })
    .state('aanvraag', {
    url: '/aanvraag',
    templateUrl: 'views/aanvraag.html',
    controller: 'AanvraagCtrl'
    })
    .state('about', {
    url: '/about',
    templateUrl: 'views/about.html',
    controller: 'MainCtrl'
    })
    .state('contact', {
    url: '/contact',
    templateUrl: 'views/contact.html',
    controller: 'MainCtrl'
    });
    }
    ]);

    controller AanvraagCtrl.js:
    angular.module('iLeadsApp')
    .controller('AanvraagCtrl', function($scope,FIREBASE_URL) {
    var FBRefAanvragen = new Firebase(FIREBASE_URL + 'aanvragen');

    FBRefAanvragen.on('value',function(snap){
    $scope.aanvragen = snap.val();
    });


    $scope.addAanvraag = function(aanvraag){
    FBRefAanvragen.push(aanvraag);
    };


    $scope.removeAanvraag = function(aanvraag){
    FBRefAanvragen.push(aanvraag);
    };
    });
    view aanvragen.html:
    <table class="table table-bordered">
    <thead>
    <tr>
    <th>Datum</th>
    <th>Agency</th>
    <th>Contactpersoon</th>
    <th>&nbsp;</th>
    </tr>
    </thead>
    <tr ng-repeat="aanvraag in aanvragen">
    <td>{{aanvraag.datum}}</td>
    <td>{{aanvraag.agency}}</td>
    <td>{{aanvraag.contactpersoon}}</td>
    <td>edit ({{aanvraag.name()}})</td>
    </tr>
    </table>

    If I request a page with this url: *http://ileads.local/#/aanvragen
    <http://ileads.local/#/aanvragen> *the view displays but ng-repeat
    generates no data. Only when I navigate to another view (e.g. about) and
    back the snapshot data is displayed by ng-repeat...
    Why is that? Isn't
    FBRefAanvragen.on('value',function(snap){ $scope.aanvragen = snap.val();
    });
    also executed on initial page load?
    --
    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/655d98f8-10ff-439b-a813-8cc6a39cd5e3%40googlegroups.com.
    For more options, visit https://groups.google.com/d/optout.
  • Michael Wulf at Jul 9, 2014 at 7:02 am
    Marc,

    When you modify variables in $scope, Angular needs to know there was a
    change before it runs the compiler
    <https://docs.angularjs.org/guide/compiler> and applies the updates to the
    DOM. Normally, when you run ops through the Angular-verse, like ng-click,
    ng-submit, etc, it automatically performs dirty checking and finds the
    updates.

    However, when you modify the in-memory variables outside the Angular-verse
    (such as by using Firebase) you must manually inform it to run the digest
    scope <http://www.sitepoint.com/understanding-angulars-apply-digest/> by
    calling $scope.$apply. AngularFire
    <https://www.firebase.com/quickstart/angularjs.html> takes care of this
    behind the scenes on your behalf.

      FBRefAanvragen.on('value',function(snap){
        $timeout(function() {
            $scope.aanvragen = snap.val();
        });
      });

    There are also several stack overflow questions on this topic.

    http://stackoverflow.com/questions/21922470/how-come-angular-doesnt-update-with-scope-here/21923026#21923026
    http://stackoverflow.com/questions/22264511/binding-not-working-with-angular-js-and-firebase-simple-login/22264979#22264979
    http://stackoverflow.com/questions/22155285/angular-rendering-engine-firebase-profile-retrieval/22191933#22191933


    Cheers,
    Kato

    On Tue, Jul 8, 2014 at 11:49 PM, Jacob Wenger wrote:

    Hi Marc,

    To answer your last question, yes, the on("value") event listener is
    execute on initial page load. It seems like you have confirmed this by the
    fact that you say that if you console.log() inside of the it, you see the
    correct data.

    As far as why you don't see it in ng-repeat, I unfortunately don't have a
    good answer for you. It's odd that you say it works when you navigate back
    to the page. I would expect it to either not work at all or to always work.
    I'm not too familiar with the ui-route in Angular, but maybe that is
    causing some issue here. Maybe for some reason the Angular $digest loop
    is not being run when you initially navigate to the page...

    Marc, it would be super helpful to get a repro of this bug in a JSFiddle
    or Plunkr. Could you put that together and send us a link?

    Kato, do you have any suggestions here/have you seen this before?

    Jacob

    On Sunday, July 6, 2014 2:52:14 PM UTC-7, Marc B wrote:

    Hello,

    I have a webpage with an associated controller. When I request the
    corresponding route (I use ui-route), the view is shown, the data is
    rertieved from FireBase location (I can see via console.log) but tHe
    retrieved data is not shown in tHe view. Only when I manually switch to
    another page - generating a $routeChange event - and I come back to The
    initial page, the data is displayed.
    This is what I have:

    app.js - the ui-router part:
    .config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$
    urlRouterProvider) {
    $urlRouterProvider.otherwise('main');
    $stateProvider
    .state('main', {
    url: '/main',
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
    })
    .state('aanvragen', {
    url: '/aanvragen',
    templateUrl: 'views/aanvragen.html',
    controller: 'AanvraagCtrl'
    })
    .state('aanvraag', {
    url: '/aanvraag',
    templateUrl: 'views/aanvraag.html',
    controller: 'AanvraagCtrl'
    })
    .state('about', {
    url: '/about',
    templateUrl: 'views/about.html',
    controller: 'MainCtrl'
    })
    .state('contact', {
    url: '/contact',
    templateUrl: 'views/contact.html',
    controller: 'MainCtrl'
    });
    }
    ]);

    controller AanvraagCtrl.js:
    angular.module('iLeadsApp')
    .controller('AanvraagCtrl', function($scope,FIREBASE_URL) {
    var FBRefAanvragen = new Firebase(FIREBASE_URL + 'aanvragen');

    FBRefAanvragen.on('value',function(snap){
    $scope.aanvragen = snap.val();
    });


    $scope.addAanvraag = function(aanvraag){
    FBRefAanvragen.push(aanvraag);
    };


    $scope.removeAanvraag = function(aanvraag){
    FBRefAanvragen.push(aanvraag);
    };
    });
    view aanvragen.html:
    <table class="table table-bordered">
    <thead>
    <tr>
    <th>Datum</th>
    <th>Agency</th>
    <th>Contactpersoon</th>
    <th>&nbsp;</th>
    </tr>
    </thead>
    <tr ng-repeat="aanvraag in aanvragen">
    <td>{{aanvraag.datum}}</td>
    <td>{{aanvraag.agency}}</td>
    <td>{{aanvraag.contactpersoon}}</td>
    <td>edit ({{aanvraag.name()}})</td>
    </tr>
    </table>

    If I request a page with this url: *http://ileads.local/#/aanvragen
    <http://ileads.local/#/aanvragen> *the view displays but ng-repeat
    generates no data. Only when I navigate to another view (e.g. about) and
    back the snapshot data is displayed by ng-repeat...
    Why is that? Isn't
    FBRefAanvragen.on('value',function(snap){ $scope.aanvragen = snap.val();
    });
    also executed on initial page load?

    --
    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/655d98f8-10ff-439b-a813-8cc6a39cd5e3%40googlegroups.com
    <https://groups.google.com/d/msgid/firebase-angular/655d98f8-10ff-439b-a813-8cc6a39cd5e3%40googlegroups.com?utm_medium=email&utm_source=footer>
    .

    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/CAFHX4%3DoFtWDdhFadzrV7%3DkF3gbiqEEOzjaARsGy7zzixaBwHKQ%40mail.gmail.com.
    For more options, visit https://groups.google.com/d/optout.

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupfirebase-angular @
postedJul 6, '14 at 9:52p
activeJul 9, '14 at 7:02a
posts3
users3

People

Translate

site design / logo © 2021 Grokbase