Is this just a bad use case for AngularFire?

Question

I have been playing with AngularFire for several days, and I wonder if I can just try, which in the end is a bad use case. I will be doing live chat / presence on my site, so this part is useful. This part I'm working on is I don’t know.

So, I have a registration form. When users register, they must select a color from the drop-down list. I have a list stored in an array in Firebase.

I am trying to maintain a fairly strict MVC setup, so I have each controller in its own file, as well as each corresponding service. The previous angular applications I wrote used a structure, and so far it has worked well.

What I can’t understand is the correct way to just read the list and populate it in the drop-down list.

In previous angular applications, there was just something like:

return $resource(URL + /colors);

So, in AngularFire, I used mainly this, which works, buuuuutttt:

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

Now, of course, that I absolutely HATE: why do I have to go around this area? It seems I can’t get getColor () to return a regular array of objects {name: "Blue", value: "Blue"}. Not only do I need to pass $ scope around, I cannot set the drop to a random value unless I do this in the service. Bad bad bad. I don’t want to pass the Ctrl area to the service at all, and I certainly don’t want to update the variables of the $ Ctrl variable from the service.

? Firebase , , . , , .

, Firebase/AngularFire, $var?

.

Answer 1

, , : $scope ?

, $scope AngularFire. $scope, .

AngularFire $scope , Angular .

AngularFire $firebase factory/service. , . $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>