这对AngularFire来说是一个糟糕的用例吗?

is this just a bad use-case for AngularFire?

本文关键字：一个 AngularFire 这对      更新时间：2023-09-26

我已经在AngularFire上玩了几天了，我想知道我是否只是在尝试它最终的坏用例。我将在我的网站上做实时聊天/存在，所以这部分是有用的。这篇我正在做，不过——我不知道。

我有一个登记表。当用户注册时，他们必须从下拉列表中选择一种颜色。我把列表存储在Firebase的数组中。

我试图保持一个相当严格的MVC设置，所以我有每个控制器在自己的文件，以及每个相应的服务。我之前写过的angular应用都使用了这个结构，而且到现在为止都运行得很好。

我不明白的是简单地读回列表并将其填充到下拉列表中的正确方法。

在以前的angular应用中，它就像这样:

return $resource(URL + /colors);

在AngularFire中，我用的是这个，它在工作，但是uuuutttt:

getColors: function($scope) {
            syncData('usergen/colors').$bind($scope, 'colorsRaw').then(function() {
                var keys = $scope.colorsRaw.$getIndex();
                angular.forEach(keys, function(key) {
                    var color = {label: $scope.colorsRaw[key], value: $scope.colorsRaw[key]};
                    $scope.data.colors.push(color);
                });
                $scope.data.color = $scope.data.colors[Math.floor(Math.random() * $scope.data.colors.length)];
            });
        }

现在我最讨厌的是:为什么我要像那样传递$scope ?我似乎不能让getColor()返回{name: "Blue"， value: "Blue"}对象的常规数组。我不仅需要传递$scope，而且不能将下拉列表设置为随机值，除非我在服务中这样做。坏坏坏。我根本不想把Ctrl $scope传递给服务，我当然也不想从服务中更新Ctrl $scope变量。

那么我到底错过了什么呢?Firebase似乎发展得很好，所以我确信这是我完全缺乏理解。我学习了所有的聊天示例和教程，但是没有什么比得上我在这里要做的。

那么是否有一种方法可以为Firebase/AngularFire调用提供单独的服务，允许我只返回值给我的控制器，而无需传递$scope var?

谢谢。

现在我最讨厌的是:为什么我要像那样传递$scope ?

很多人认为你必须使用$scope与AngularFire。您不仅可以在没有$scope的情况下使用它，而且在大多数情况下是推荐使用的。

在$scope中过多地使用AngularFire真的会减慢你的应用速度，因为Angular现在的任务是跟踪它。

当使用AngularFire时，我通常在工厂/服务级别上创建我的$firebase绑定。通过这种方式，它变得可重用且易于维护。然后，我可以在控制器的$scope上创建简单的数组，并在添加新项时推送。

恰好演示
angular.module('app', ['firebase'])
.constant('FBURL', 'https://<your-firebase>.firebaseio.com/')
.service('FbRef', ['FBURL', Firebase])
.factory('Colors', function (FbRef, $firebase, $q) {
    var $colors = $firebase(FbRef.child('colors'));
    return {
        get: function getColors() {
            var deferred = $q.defer();
            $colors.$on('loaded', function (colors) {
                var colorArr = [];
                angular.forEach(colors, function (color) {
                    colorArr.push(color);
                });
                deferred.resolve(colorArr);
            });
            return deferred.promise;
        },
        add: function addColor(color) {
            $colors.$add(color);
        }
    };
})
.controller('RegisterCtrl', function ($scope, Colors) {
    $scope.colors = [];
    // listen for added colors
    // this will grab all of the colors on load
    Colors.get().then(function (colors) {
        $scope.colors = colors;
        var randomIndex = getRandomIndex(0, colors.length - 1);
        $scope.current = colors[randomIndex];
    });
    function getRandomIndex(min, max) {
        return Math.floor(Math.random() * max) + min;
    }
});

视图只是一个简单的选择与ng-model和ng-options。

<select ng-model="current" ng-options="c for c in colors"></select>
相关文章：