使用angularFire的“未定义不是函数”错误答案

【问题标题】："undefined is not a function" error using angularFire使用angularFire的“未定义不是函数”错误
【发布时间】：2023-04-02 05:38:01
【问题描述】：

我正在尝试显示来自 firebase 的数据，并且我有以下代码。我已经为我的应用声明了 firebase 依赖项。

.controller('AdvMainCtrl', ['$scope', 'dataLoad', 

    function($scope, dataLoad, $route, $routeParams, $location, $resource, angularFire) {
        var categoryPromise = dataLoad.loadCategories($scope, 'categories'),
        tmPromise = dataLoad.loadTransportationMode($scope, 'tModes'),
        tourPromise = dataLoad.loadAdventures($scope, 'tours');
        categoryPromise.then(function() {
            console.log('data loaded');
        });

        $scope.$watch('category', function() {
            if (typeof $scope.category === 'undefined') return;
            console.log('category changed');
            console.log($scope.category.name);
        });
        $scope.$watch('tMode', function() {
            if (typeof $scope.tMode === 'undefined') return;
            console.log('tm changed');
            //console.log($scope.transportationMode.name);
        });
    var ref = new Firebase("https://wpladv.firebaseio.com/adventure");
    $scope.tours = [];
    angularFire(ref, $scope, "tours");
    }
])

在控制台中，我看到angularFire(ref, $scope, "tours"); 语句中发生的错误。我不确定如何解决这个问题。

我的控制器中的整个代码是

.controller('AdvMainCtrl', ['$scope', 'dataLoad',
        function($scope, dataLoad, $route, $routeParams, $location, $resource, angularFire) {
            var categoryPromise = dataLoad.loadCategories($scope, 'categories'),
            tmPromise = dataLoad.loadTransportationMode($scope, 'tModes'),
            tourPromise = dataLoad.loadAdventures($scope, 'tours');
            categoryPromise.then(function() {
                console.log('data loaded');
            });

            $scope.$watch('category', function() {
                if (typeof $scope.category === 'undefined') return;
                console.log('category changed');
                console.log($scope.category.name);
            });
            $scope.$watch('tMode', function() {
                if (typeof $scope.tMode === 'undefined') return;
                console.log('tm changed');
                //console.log($scope.transportationMode.name);
            });
        var ref = new Firebase("https://wpladv.firebaseio.com/adventure");
        $scope.tours = [];
        angularFire(ref, $scope, "tours");
        }
    ])

错误显示在“var categoryPromise = dataLoad.loadCategories($scope, 'categories')”语句中

我的 api js 文件中有以下代码。

angular.module('localAdventuresApp')
    .factory('dataLoad', ['angularFire',
        function(angularFire) {
            var dbUrl = 'https://wpladv.firebaseio.com/';

            return {
                loadCategories: function(scope, items) {
                    var cat = '/category';
                    return angularFire(dbUrl + cat, scope, items, []);
                },
                loadTransportationMode: function(scope, items) {
                    var cat = '/transportMode';
                    return angularFire(dbUrl + cat, scope, items, []);
                },
                loadAdventures: function(scope, items) {
                    var cat = '/adventures';
                    return angularFire(dbUrl + cat, scope, items, {});
                }
            }
        }
    ])

错误显示在“return angularFire(dbUrl + cat, scope, items, []);”中在此声明。我在控制台中看到的错误是“错误：请提供 Firebase 引用而不是 URL，例如：new Firebase(url)”。

【问题讨论】：

你注入了firebase依赖吗？
是的，我确实在我的应用程序中注入了它。 angular.module('localAdventuresApp', ['firebase',]
添加了所有必需的依赖项，现在出现错误“请提供 Firebase 引用而不是 URL，例如：new Firebase(url)”。我该如何解决这个问题？
尝试记录 ref 以查看是否出现任何问题，查看 angularFires 文档，此代码不应引发该错误。
您正在使用模块工厂中未定义的变量“范围”。

标签： angularjs angularfire

【解决方案1】：

你需要将依赖注入你的控制器

.controller('AdvMainCtrl', ['$scope', 'dataLoad', '$route', '$routeParams', '$location', '$resource', 'angularFire',
    function($scope, dataLoad, $route, $routeParams, $location, $resource, angularFire) {
        // your code here
    }
])

【讨论】：

【解决方案2】：

出现错误“请提供 Firebase 引用而不是 URL，例如：new Firebase(url)”，因为我的 angularfire 版本 > 0.3.0。我所要做的就是将 dbUrl + cat 更改为新的 Firebase(dbUrl + cat)。这解决了这个问题。谢谢大家的宝贵建议。

修改后的代码

angular.module('localAdventuresApp')
    .factory('dataLoad', ['angularFire',
        function(angularFire) {
            var dbUrl = 'https://wpladv.firebaseio.com';

            return {
                loadCategories: function(scope, items) {
                    var cat = '/category';
                    console.log(dbUrl);
                    var ref = new Firebase(dbUrl + cat);
                    return angularFire(ref, scope, items, []);
                },
                loadTransportationMode: function(scope, items) {
                    var cat = '/transportMode';
                    var ref = new Firebase(dbUrl + cat);
                    return angularFire(ref, scope, items, []);
                },
                loadAdventures: function(scope, items) {
                    var cat = '/adventure';
                    var ref = new Firebase(dbUrl + cat);
                    return angularFire(ref, scope, items, {});
                }
            }
        }
    ])

【讨论】：