将 angularFireCollection 注入 angular.js 配置以用于解析

Question

我最近一直在尝试使用 Angular.js。作为其中的一部分，我创建了一组非常简单的控制器，其中包含 ng-view 和模板，以根据请求的路由进行触发。我使用 angularFireCollection 只是为了从 Firebase 中获取一个数组。这在不构成 ng-view 的 thumbnailController 中工作正常。

我的问题是除了流入thumbnailController的数据外，我还需要另外两个控制器才能访问数据。我最初只是将数据设置为 $rootScope 的一部分或将 ng-view 作为设置 thumbnailController 的 div 的子级。

但是，从这个角度来看，问题在于每个子控制器可能会尝试在模板中设置数据，然后才能从 Firebase 实际获得数据。

该解决方案似乎正在使用解决此问题angularFire route resolution 的答案。但是，使用下面的代码（并且还引用 angularFireCollection）我收到 angularFire 是未知提供者的错误消息。我的理解是下面的代码应该足够了，我还要补充一点，正如我所说，thumbnailController 中 angularFireCollection 的使用效果很好。

我还尝试使用 .$inject 将 angularFire/aFCollection 直接注入控制器，但是在它被视为未知提供者方面出现了类似的问题。

如果可能的话，有人可以就这里可能出现的问题提出建议吗？

var galleryModule = angular.module('galleryModule', ['firebase']);

galleryModule.config(['$routeProvider', 'angularFire', function($routeProvider,  angularFire){
$routeProvider.
    when('/', {
        controller: initialController,
        templateUrl: 'largeimagetemplate.html',
        resolve: {images: angularFire('https://mbg.firebaseio.com/images')}
    }).
    when('/view/:id', {
        controller: mainimageController,
        templateUrl: 'largeimagetemplate.html',
        resolve: {images: angularFire('https://mbg.firebaseio.com/images')}
    }).
    otherwise({
        redirectTo: '/'
});
}]);

galleryModule.controller('thumbnailController', ['$scope', 'angularFireCollection',       function($scope, angularFireCollection){
    var url = 'https://mbg.firebaseio.com/images';
    $scope.images = angularFireCollection(url);
}]);

function initialController($scope,images){
    $scope.largeurl = images[0].largeurl;
}


function mainimageController($scope, images, $routeParams){
  $scope.largeurl = images[$routeParams.id].largeurl;
}

Answer 1

我有机会对此进行了深入研究 - 似乎常规服务不能在 .config 部分中使用。我会在控制器中实例化 angularFire 而不是使用解析，例如：

galleryModule
.value("url", "https://mbg.firebaseio.com/images")
.controller('thumbnailController', ['$scope', 'angularFireCollection', 'url',
    function($scope, angularFireCollection, url) {
        $scope.images = angularFireCollection(url);
    }])
.controller('initialController', ['$scope', 'angularFire', 'url',
    function($scope, angularFire, url) {
        angularFire(url, $scope, 'images').then(function() {
            $scope.largeurl = $scope.images[0].largeurl;
        });
    }])
.controller('mainimageController', ['$scope', 'angularFire', '$routeParams', 'url',
    function($scope, angularFire, $routeParams, url){
        angularFire(url, $scope, 'images').then(function() {
            $scope.largeurl = $scope.images[$routeParams.id].largeurl;
        });
    }]);

这并非没有效率，因为 Firebase 仅从 URL 加载一次数据，并且所有后续承诺几乎都会立即使用手头的数据解决。

不过，我希望看到 angularFire 在 $routeProvider 中与 resolve 一起工作。在我们找到更优雅的解决方案之前，您可以使用此方法作为解决方法。