Инъекция angularFireCollection в конфигурацию angular.js для использования по разрешению

Question

Я немного экспериментировал с Angular.js. В рамках этого я создал очень простой набор контроллеров с ng-view и шаблонами для запуска в зависимости от запрошенного маршрута. Я использую angularFireCollection, чтобы захватить массив из Firebase. Это отлично работает в thumbnailController, который не является частью ng-view.

Моя проблема заключается в том, что помимо данных, передаваемых в thumbnailController, мне также нужны два других контроллера для доступа к данным. Сначала я просто установил, что данные либо являются частью $ rootScope, либо имеют ng-view в качестве дочернего элемента div, в котором установлен параметр thumbnailController.

Однако проблема с этой точки зрения заключается в том, что каждый подконтроллер, по-видимому, пытается установить данные в шаблоне, прежде чем он будет фактически доступен из Firebase.

Решение похоже на использование решения в соответствии с ответом на этот вопрос angularFire route resolution. Однако, используя приведенный ниже код (а также ссылаясь на angularFireCollection), я получаю сообщение об ошибке, которое angularFire является неизвестным провайдером. Мое понимание кода ниже должно быть достаточным, и я бы также добавил, что использование angularFireCollection в thumbnailController прекрасно работает, как я говорю.

Я также экспериментировал с инжектированием углового Fire/aFCollection непосредственно в контроллеры, используя. $ Inject, однако подобная проблема возникла с точки зрения того, что она считается неизвестным провайдером.

Если возможно, кто-нибудь может посоветовать, в чем проблема может быть здесь?

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

Это не ineffecient, так как данные загружаются только один раз из URL с помощью Firebase, и все последующие обещания будут решены практически сразу с уже имеющимися данными.

Я бы хотел, чтобы угловое изображение работало с разрешением в $ routeProvider. Вы можете использовать этот метод как обходной путь, пока не выясните более элегантное решение.