Question

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

我的问题是，除了流入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而不是使用resolve，例如：

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只会从网址加载一次数据，所有随后的承诺几乎会立即解决，而且数据已经存在。

我希望看到angularFire在$ routeProvider中使用resolve进行处理。您可以使用此方法作为解决方法，直到我们找到更优雅的解决方案。

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

1 个答案: