如何在 Firebase 中使用 Ng-if [英] How to use an Ng-if with Firebase

问题描述

我知道 ng-if 指令会创建一个新的子作用域，我想知道如何以及是否可以将 ng-if 转换为另一个作用域.

目前我看不到任何图标.我试过 ng-hide，但我看到了两个图标同时，无法解决该问题...我也尝试过 ng-show，但结果与 ng-if 相同.

Set() 函数返回 true 或 false，它正在工作，因为我可以在控制台中看到结果.

有什么想法吗?

$scope.set = function($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);如果(nbPerson === varPerson){//console.log("true");返回真；}别的{//console.log("false");返回假；}});};

<button ng-if ="give(f) === false" class="badge 徽章-positive" ng-click="joinEvent(e)><span ng-if ="set(r) === true"><ion-icon class="ion-person-add give-var"></ion-icon></span><span ng-if ="set(r) === false"><ion-icon class="ion-person-add var"></ion-icon></span>

我添加了 set() 函数，$r 是来自 Firebase 数据库的记录，它有一个带有记录 ID 的selfID"变量.

我确信give() 函数正在工作，因为我还有一个运行ng-if="give(f) === true" 的按钮.

整个代码在同一个控制器上运行.

(新片段)

编辑 3:(依赖添加 $q)

function ($scope, $rootScope, $q, $stateParams, $firebase, $firebaseArray, $state, $ionicPopup) {$scope.set = 函数($r){$scope.varPerson = "";$scope.nbPerson = "";var basePromise = firebase.database().ref('events/'+$r.selfID).once("value");$q.when(basePromise).then(function(snapshot){$scope.nbPerson = snapshot.val().nbPerson;$scope.varPerson = snapshot.val().varPerson;如果($scope.nbPerson === $scope.varPerson){返回真；}别的{返回假；}});}};

编辑 4:(终于)

好吧，我没能应付同步问题，所以我只是在两个ng-if里面加了一个测试，所以没有set()函数.

非常感谢那些帮助过我的人，尤其是@georgeawg 的专业知识！

 <ion-icon class="ion-person-add give-var"></ion-icon></span><span ng-if ="r.nbPerson > r.varPerson"><ion-icon class="ion-person-add var"></ion-icon></span>

解决方案

Firebase 承诺不是 AngularJS 承诺

firebase API 返回的 Promise 未与 AngularJS 框架集成.

使用 启动 后立即执行em>.Part3"的控制台日志位于由 $q 服务保存的成功处理函数内/a> 并在数据从服务器和 调用"nofollow noreferrer">XHR 完成.

有关详细信息，请参阅如何在成功处理程序之外使用 $http 承诺响应.

---

演示

console.log("Part 1");console.log("第二部分");var promise = new Promise(r=>r());承诺.然后(功能(){console.log("第三部分");});console.log("Part *4*");

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 tried ng-hide, but I saw the two icons in the same time, impossible to fix that problem...I also tried ng-show, but with the same results as ng-if.

Set() function returns true or false, it's working because I can see the result in the console.

Any ideas ?

$scope.set = function($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");
            return true;
        }
        else
        {
            //console.log("false");
            return false;
        }
    });
};

<button ng-if ="give(f) === false" class="badge badge-positive" ng-click="joinEvent(e)">

    <span ng-if ="set(r) === true">
        <ion-icon class="ion-person-add give-var"></ion-icon>
    </span>


    <span ng-if ="set(r) === false">
        <ion-icon class="ion-person-add var"></ion-icon>
    </span>

</button>

EDIT :

I added the set() function, $r is a record from a Firebase DB, it has a "selfID" variable with his record ID.

I'm sure that give() function is working, because I have an other button running with the ng-if="give(f) === true".

This entire code is working on the same controller.

EDIT 2 : (new snippet)

EDIT 3 : (add $q in dependency)

function ($scope, $rootScope, $q, $stateParams, $firebase, $firebaseArray, $state, $ionicPopup) {

    $scope.set = function($r)
    {
        $scope.varPerson = "";
        $scope.nbPerson = "";

        var basePromise = firebase.database().ref('events/'+$r.selfID).once("value");

        $q.when(basePromise).then(function(snapshot)
        {
            $scope.nbPerson = snapshot.val().nbPerson;
            $scope.varPerson = snapshot.val().varPerson;

            if($scope.nbPerson === $scope.varPerson)
            {
                return true;
            }
            else
            {
                return false;
            }
        });
    }
};

EDIT 4 : (Finally)

Ok, I wasn't able to cope with the synchronous problems, so I simply add a test inside the two ng-if, so without the set() function.

Thanks a lot for those who helped me, and especially @georgeawg for his expertise !

    <span ng-if ="r.nbPerson === r.varPerson">
        <ion-icon class="ion-person-add give-var"></ion-icon>
    </span>

    <span ng-if ="r.nbPerson > r.varPerson">
        <ion-icon class="ion-person-add var"></ion-icon>
    </span>

解决方案

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 function
function set($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");
            return true;
        }
        else
        {
            //console.log("false");
            return false;
        }
    });
};
  

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(function successHandler(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 XHR starts. 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 XHR completes.

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

---

Demo

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

这篇关于如何在 Firebase 中使用 Ng-if的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！