如何在Firebase

时间：2017-04-21 17:17:33

标签： javascript angularjs firebase angular-promise

我知道ng-if指令会创建一个新的子范围，我想知道怎么做以及是否可以将ng-if播放到另一个范围内。

现在我看不到任何图标。我尝试过隐藏，但我看到了两个图标  同时，不可能解决这个问题...我也尝试过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数据库的记录，它有一个＆＃34; selfID＆＃34;变量与他的记录ID。

我确定give（）函数正在运行，因为我有另一个按钮运行ng-if =＆＃34;给（f）=== true＆＃34;。

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

编辑2： （新片段）

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

2 个答案:

答案 0 :(得分：2)

我建议使用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>

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

答案 1 :(得分：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 promise转换为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块.then块内部不会向父函数返回值。在父函数完成之后，.then块内的代码以异步执行。

JavaScript是单线程的。功能立即完成。他们无法返回console.log("Part1"); console.log("Part2"); var promise = $http.get(url); promise.then(function successHandler(response){ console.log("Part3"); }); console.log("Part4"); 块中创建的值。它们只能返回立即和同步生成的值，或者它们可以返回挂起承诺，稍后异步解析为某个值。

基于承诺的异步操作的展示

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

pic

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

有关详细信息，请参阅XHR

演示

fetch

相关问题
最新问题