【问题标题】：How to use an Ng-if with Firebase如何在 Firebase 中使用 Ng-if
【发布时间】：2017-04-21 17:17:33
【问题描述】：

我知道 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);

        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>

编辑：

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

我确定 give() 函数正在运行，因为我还有一个使用 ng-if="give(f) === true" 运行的按钮。

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

编辑 2： (新的sn-p)

编辑 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;
            }
        });
    }
};

编辑 4：（最后）

好的，我无法处理同步问题，所以我只是在两个 ng-if 中添加了一个测试，所以没有 set() 函数。

非常感谢那些帮助过我的人，尤其是 @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>

【问题讨论】：

您确定 give(f) 正在返回预期结果吗？
这些give 和set 函数是否在修改控制器的状态？可以提供这些 JS sn-ps 吗？
请在minimal reproducible example 中提供所有相关代码。现在，没有办法知道出了什么问题。可能是您的set 函数在ng-if 范围内返回undefined，这与true 或false 不匹配...
ion-icon 不使用name 属性而不是class 属性来设置图标吗？
当我编辑我的帖子时，是的 give(f) 为我提供了正确的结果。 Give() 和 set() 在同一个控制器中，第一个在工作，另一个不在...

标签： javascript angularjs firebase angular-promise

【解决方案1】：

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

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>

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

Firebase 承诺不是 AngularJS 承诺

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

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

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

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

firebase 承诺需要转换为 AngularJS 承诺以将事件带入 AngularJS 执行上下文。

调试`$scope.set`函数：

保存返回值并记录。

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

通过使用这种简单的调试技术，您将很快理解问题。

我的 set() 函数的结果无法访问... :( 我的新函数（编辑 3），正确吗？

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

JavaScript 是单线程的。功能立即完成。它们不能返回在.then 块中创建的值。它们只能返回立即同步生成的值，或者它们可以返回 pending 承诺，这些承诺稍后会异步解析为某个值。

基于 Promise 的异步操作详解

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

“第 4 部分”的控制台日志不必等待数据从服务器返回。它在XHR 开始之后立即执行。 “第 3 部分”的控制台日志位于成功处理函数中，该函数由 $q service 持有，并在数据从服务器到达并且 XHR 完成之后调用 .

欲了解更多信息，请参阅How to use $http promise response outside success handler.

演示

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 和 AngularJS 之间的同步问题，事实上，当我检查 firebase 请求没有发出任何内容时。这似乎是一个延迟......我尝试了（主帖的编辑 2）你向我建议的内容，但我得到一个“$q 未定义错误”，我忘记了什么吗？
你需要将$q注入控制器。见AngularJS Developer Guide - Dependency Injection。
Arf，我添加了 $q，我确信我已经接近了一些东西，但是仍然从 ng-if 开始，我的 set() 函数的结果是无法访问的...... :( 是我的新功能（编辑 3），正确吗？

Firebase 承诺不是 AngularJS 承诺

调试$scope.set函数：

基于 Promise 的异步操作详解

演示

调试`$scope.set`函数：