Firebase Database Function Can't Modify a $scope variable in angularjs

Question

I have the following code:

angular.module("MyApp", ['textAngular'])
.controller("demoController", function demoController($scope) {
    $scope.content = null;
    firebase.database().ref('pages/home').on('value', function(snapshot) { $scope.content = snapshot.val(); });
    console.log($scope.content);
});

As you can see, all I am trying to do is change a variable in the scope of my controller within a function that accesses the firebase database, in order to store the contents of a certain entry. When attempting this however, the variable simply does not change. I have tried the same thing using 'window.content', as well as trying to use 'var content;' to no avail. Is there any way to allow a variable to be globally accessed from within a function?

edit - When I run the firebase.databse().ref fucntion and use alert(snapshot.val()); it works and the information is displayed in the alert.

CD.. · Accepted Answer · 2016-07-20 13:47:31Z

4

Use $apply():

$apply() is used to execute an expression in angular from outside of the angular framework (For example from browser DOM events, setTimeout, XHR or third party libraries).

For example:

firebase.database()
  .ref('pages/home')
  .on('value', function(snapshot) {     
    $scope.$apply(function(){
      $scope.content = snapshot.val();
    });
});

answered Jul 20, 2016 at 13:47

CD..

74.4k25 gold badges160 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

WebGavDev Over a year ago

after trying this, the variable is still not recognized and returns null when logged.

The Dark Knight · Accepted Answer · 2016-07-20 13:47:08Z

1

Firebase is asynchronous, (ie The rest of the code will run without waiting for the firebase function to run. Put the console.log inside the on function, you will see that the scope variable has in fact changed.

answered Jul 20, 2016 at 13:47

The Dark Knight

7474 silver badges10 bronze badges

Comments

WebGavDev · Accepted Answer · 2016-07-23 05:18:57Z

None of those methods worked, however I ended up solving the problem by doing this:

var app = angular.module("textAngularDemo", ['textAngular'])
app.controller("demoController", function demoController($scope) {
    firebase.database().ref('pages/home').on('value', function(snapshot) {     
        test($scope, snapshot.val());
    });
    $scope.detectChange = function(){
        setTimeout(function(){
            if ($scope.content)
            {
                console.log ($scope.content);
                }
            }
            else
            {
                $scope.detectChange();
            }
        }, 1);
    }
    function test(scope, variable){
        scope.content = variable;
        $scope.$apply();
    }
    setTimeout(function(){ $scope.detectChange() }, 1);
});

I believe this is acts in the same way as a promise, however I had no knowledge of how to implement them at the time. Call this a 'pseudo promise' if you will.

Silent Coder · Accepted Answer · 2016-07-21 05:11:11Z

0

Try this

firebase.database().ref('pages/home').on('value', function(snapshot) {     scope.$apply(function(){$scope.content = snapshot.val().content });});

answered Jul 21, 2016 at 5:11

Silent Coder

11 bronze badge

Collectives™ on Stack Overflow

Firebase Database Function Can't Modify a $scope variable in angularjs

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related