javascript - Firebase、AngularJS 和 GeoFire - 等待工厂的响应

Question

我开始学习很多与混合应用程序编码相关的东西。我决定继续使用基于 AngularJS 的 Ionic 框架(这让我有机会学习它)，并使用 Firebase 作为我的后端解决方案。

我想在我的应用程序中设置一张 map ，这样我就可以找到用户和他周围的一些兴趣点。我发现 GeoFire 存在，所以我开始使用它。

我的问题:我无法显示保存到 Firebase 中的用户位置。我使用 GeoFire 查询它，并获得响应(console.log)但它不会更新范围变量。

这是JS代码:

myApp.factory("MyLoc", function(){
    var firebaseRef = new Firebase("https://myfirebase.firebaseio.com/geofire/");
    var geoFire = new GeoFire(firebaseRef);

    /*    geoFire.set("user_loc", [37.785326, -122.405696]).then(function() {
     console.log("Provided key has been added to GeoFire");
     }, function(error) {
     console.log("Error: " + error);
     });*/

     return geoFire.get("user_loc").then(function(location) {
        if (location === null) {
            console.log("Provided key is not in GeoFire");
            return 0;
        }
        else {
            console.log("Provided key has a location of " + location);
            return location;
        }
    }, function(error) {
        console.log("Error: " + error);
        return 0;
    });
})

myApp.controller("firstCtrl", function($scope, MyLoc) {
    $scope.data = {};

    $scope.data.myLoc = MyLoc;
});

HTML 只是显示它:

{{data.myLoc}}

由于我是 Angular N00b，我想我遗漏了一些明显的东西。我想我应该使用 promise 或类似的东西，只是不知道如何!有人能帮助我吗 ？ :)

非常感谢兄弟!

[更新]

好的，这是第一个问题的答案!

MyLoc.then(function(data){
  $scope.data.myLoc = data;

  $scope.$apply();
});

但是我不得不使用

$scope.$apply();

为了让 HTML 显示它，显然它不会立即更新。你知道为什么吗？我知道 Angular 必须被通知更改才能显示，正如这里很好地解释的那样:http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

我不明白的是，为什么会这样？为什么 Angular 不知道变化？

再次感谢!

Answer 1

您在这里被 Firebase 的 API 异步这一事实所困扰。您不能以您尝试的方式从异步调用返回值:

这是您的代码的相关片段:

myApp.factory("MyLoc", function(){
    var firebaseRef = new Firebase("https://myfirebase.firebaseio.com/geofire/");
    var geoFire = new GeoFire(firebaseRef);

     return geoFire.get("user_loc").then(function(location) {
        if (location === null) {
            console.log("Provided key is not in GeoFire");
            return 0;
        }
        else {
            console.log("Provided key has a location of " + location);
            return location;
        }
    }, function(error) {
        console.log("Error: " + error);
        return 0;
    });
})

注意您传递给 then 的那些函数？这些称为回调函数，是 Firebase(以及一般的现代网络)异步操作的关键。如果您将这些回调提取到常规的、全局的、命名的函数中，就更容易理解为什么您的构造不起作用:

myApp.factory("MyLoc", function(){
    var firebaseRef = new Firebase("https://myfirebase.firebaseio.com/geofire/");
    var geoFire = new GeoFire(firebaseRef);

     return geoFire.get("user_loc").then(onGeoFireResult, onGeoFireError);
})

function onGeoFireResult(location) {
    if (location === null) {
        console.log("Provided key is not in GeoFire");
        return 0;
    }
    else {
        console.log("Provided key has a location of " + location);
        return location;
    }
}

function onGeoFireError(error) {
    console.log("Error: " + error);
    return 0;
}

当您调用 geoFire.get("user_loc") 时它向服务器执行请求。该请求可能需要一些时间，我们不希望浏览器被阻止。因此，我们不是等待请求完成，而是传入一个函数，当服务器响应请求的数据时调用该函数。由于事情可能会出错，我们还传入了一个函数，以便在出现错误时调用。

所以重要的是要意识到 onGeoFireResult和 onGeoFireError在与调用 geoFire.get("user_loc") 不同的时间运行.所以你不能从封装函数中返回它们的结果。相反，您必须处理 promise 的概念:一种结构，该结构在某个时候将包含您请求的数据。

如果您想在没有 AngularFire 的情况下继续使用 Firebase 和 Angular，我强烈建议您观看此视频教程:https://www.youtube.com/watch?v=3YVlcFyxBr4 .花一个小时左右的时间可以在这里省去几十个问题。

或者设置两个断点:一个在 onGeoFireResult 上和一个在geoFire.get("user_loc")之后的线上并查看哪个断点先触发。