How To Use An Ng-if With Firebase

I know that the ng-if directive creates a new child scope and I would like to know HOW and IF it is possible to play a ng-if into an other one. For now I can't see any icons. I've

Solution 1:

I suggest to use the controllerAs syntax to ensure correct scope access and control.

HTML:

<bodyng-controller="MainCtrl as ctrl"><divng-if="ctrl.showParent()"><h3>Parent is allowed</h3><divng-if="ctrl.showChildren()">Children are allowed</div><divng-if="ctrl.showChildren()">Children are allowed</div></div><buttonng-click="ctrl.toggle()">Toggle Children</button></body>

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  var allowParent_ = true;
  var allowChildren_ = false;
  this.toggle = function() {
    allowChildren_ = !allowChildren_;
  }
  this.showParent = function(){
    return allowParent_;
  }

  this.showChildren = function() {
    return allowChildren_;
  }
});

Solution 2:

Firebase promises are not AngularJS promises

Promises returned by the firebase API are not integrated with the AngularJS framework.

Use $q.when to create an AngularJS promise from a firebase promise:

var basePromise = firebase.database().ref('events/'+$r.selfID).once("value");
$q.when(basePromise).then(function(snapshot)
    {
       //.then block code   
    });

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

The firebase promise needs to be converted to an AngularJS promise to bring the event into the AngularJS execution context.

---

To debug the $scope.set function:

Save the returned value and log it.

$scope.set = function($r) {
    var value = set($r);
    console.log(value);
    return value;
}); 

//BUGGY functionfunctionset($r)
{
    firebase.database().ref('events/'+$r.selfID).once("value").then(function(snapshot)
    {   
        var nbPerson = snapshot.val().nbPerson;
        var varPerson = snapshot.val().varPerson;
        
        //console.log("nbPerson :", nbPerson);
        //console.log("varPerson", varPerson);
        
        if(nbPerson === varPerson)
        {
            //console.log("true");
            returntrue;
        }
        else
        {
            //console.log("false");
            returnfalse;
        }
    });
};
  

By using this simple debugging technique, you will quickly understand the problem.

---

the result of my set() function is unreachable... :( Is my new function (Edit 3), correct ?

The return statements inside .then blocks do not return values to the parent function. The code inside .then blocks execute asynchronously after the parent function completes.

JavaScript is single-threaded. Functions complete immediately. They can not return values created in .then blocks. They can only return values that are produced immediately and synchronously or they can return pending promises that later asynchronously resolve to some value.

Expaination of Promise-Based Asynchronous Operations

console.log("Part1");
console.log("Part2");
var promise = $http.get(url);
promise.then(functionsuccessHandler(response){
    console.log("Part3");
});
console.log("Part4");

The console log for "Part4" doesn't have to wait for the data to come back from the server. It executes immediately after the XHRstarts. The console log for "Part3" is inside a success handler function that is held by the $q service and invoked after data has arrived from the server and the XHRcompletes.

For more information, see How to use $http promise response outside success handler.

---

Demo

console.log("Part 1");
console.log("Part 2");
var promise = newPromise(r=>r());
promise.then(function() {
    console.log("Part 3");
});
console.log("Part *4*");