AngularFire dynamic link component not working

Question

I'm building a page which will retrieve data dynamically from a Firebase and utilizes Angular routing to serve a dynamic link.

JS:

.controller("IdeaCtrl", ['$scope', '$firebase', '$routeParams', function($scope, $firebase, $routeParams) {

  $scope.idea = {
    ID: $routeParams.id
  };

var ref = new Firebase("https://crowdfluttr.firebaseio.com/ideas/" + $scope.idea.ID);
ref.on("value", function(snapshot) {
  console.log(snapshot.val());
  var entries = snapshot.val();

  $scope.ideaTitle = entries.ideaTitle;

  console.log($scope.ideaTitle);

}, function (errorObject) {
  console.log("The read failed: " + errorObject.code);
});


}])

HTML:

   ID: {{ idea.ID }} <br>
   Title: {{ ideaTitle }}

The {{idea.ID}} works, but the {{ideaTitle}} does not show up. Yet, both console.log's work fine. What seems to be the matter?

Manube's answer should work. Alternatively, put the assignment in a $timeout. And please read firebase.com/docs/web/libraries/angular/… — Frank van Puffelen
But why aren't you using AngularFire? $scope.idea = $firebase(ref).$asObject() and then Title: {{ idea.ideaTitle }} should be all that is needed. It is documented here: firebase.com/docs/web/libraries/angular/… — Frank van Puffelen
Your title says AngularFire, but nothing here utilizes AngularFire. Also, you haven't read the guide on Firebase + Angular, which covers these concepts for users who don't want AngularFire. Also, this has been asked before. — Kato

Manube Manube · Accepted Answer · 2015-02-07T21:54:59

3

votes

Would

$scope.$apply()

after

$scope.ideaTitle = entries.ideaTitle

work, by any chance?

AngularFire dynamic link component not working

1 Answers