如何在Firebase中使用Ng-if

时间：2022-08-22 17:13:13

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.

我知道ng-if指令创建了一个新的子范围，我想知道如何以及如果可以将ng-if转换为另一个。

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.

现在我看不到任何图标。我已经尝试过ng-hide，但我在同一时间看到了两个图标，无法解决这个问题......我也尝试过ng-show，但结果与ng-if相同。

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

Set（）函数返回true或false，它正常工作，因为我可以在控制台中看到结果。

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.

我添加了set（）函数，$ r是来自Firebase DB的记录，它有一个带有记录ID的“selfID”变量。

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

我确定give（）函数正在工作，因为我有另一个按钮运行ng-if =“give（f）=== true”。

This entire code is working on the same controller.

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

EDIT 2 : (new snippet)

编辑2 :(新的片段）

EDIT 3 : (add $q in dependency)

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

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)

编辑4 :(最后）

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.

好吧，我无法应对同步问题，所以我只是在两个ng-if中添加一个测试，所以没有set（）函数。

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

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

    <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>

2 个解决方案

#1

2  

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

我建议使用controllerAs语法来确保正确的范围访问和控制。

HTML:

HTML：

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

JS

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_;
  }
});

#2

2  

Firebase promises are not AngularJS promises

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

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

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

使用$ q.when从firebase承诺创建AngularJS承诺：

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.

AngularJS通过提供自己的事件处理循环来修改正常的JavaScript流。这将JavaScript拆分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才会受益于AngularJS数据绑定，异常处理，属性监视等。

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

需要将firebase promise转换为AngularJS promise以将事件引入AngularJS执行上下文。

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 ?

我的set（）函数的结果是无法访问... :(是我的新功能（编辑3），对吗？

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.

.then块内的return语句不会将值返回给父函数。 .then块内的代码在父函数完成后异步执行。

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.

JavaScript是单线程的。功能立即完成。它们无法返回.then块中创建的值。它们只能返回立即和同步生成的值，或者它们可以返回挂起的promise，这些promise将在以后异步解析为某个值。

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");

如何在Firebase中使用Ng-if

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.

“Part4”的控制台日志不必等待数据从服务器返回。它在XHR启动后立即执行。 “Part3”的控制台日志位于成功处理函数内部，该函数由$ q服务保存，并在数据从服务器到达并且XHR完成后调用。

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

有关更多信息，请参阅如何在成功处理程序外使用$ http promise响应。

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*");

#1

2  

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

我建议使用controllerAs语法来确保正确的范围访问和控制。

HTML:

HTML：

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

JS

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_;
  }
});

#2

2  

Firebase promises are not AngularJS promises

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

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

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

使用$ q.when从firebase承诺创建AngularJS承诺：

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.

AngularJS通过提供自己的事件处理循环来修改正常的JavaScript流。这将JavaScript拆分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才会受益于AngularJS数据绑定，异常处理，属性监视等。

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

需要将firebase promise转换为AngularJS promise以将事件引入AngularJS执行上下文。

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 ?

我的set（）函数的结果是无法访问... :(是我的新功能（编辑3），对吗？

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.

.then块内的return语句不会将值返回给父函数。 .then块内的代码在父函数完成后异步执行。

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.

JavaScript是单线程的。功能立即完成。它们无法返回.then块中创建的值。它们只能返回立即和同步生成的值，或者它们可以返回挂起的promise，这些promise将在以后异步解析为某个值。

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");

如何在Firebase中使用Ng-if

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.

“Part4”的控制台日志不必等待数据从服务器返回。它在XHR启动后立即执行。 “Part3”的控制台日志位于成功处理函数内部，该函数由$ q服务保存，并在数据从服务器到达并且XHR完成后调用。

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

有关更多信息，请参阅如何在成功处理程序外使用$ http promise响应。

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*");

标签：

相关文章