0

最近、Angular.js を少し試しています。この一環として、リクエストされたルートに応じてトリガーする ng-view とテンプレートを備えた非常に単純なコントローラーのセットを作成しました。Firebase から配列を取得するためだけに angularFireCollection を使用しています。これは、ng-viewの一部を形成しないthumbnailControllerで正常に機能します。

私の問題は、thumbnailController に流れるデータに加えて、データにアクセスできるようにするために他の 2 つのコントローラーも必要であることです。最初は、データを $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;
}
4

1 に答える 1

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 から 1 回だけ読み込まれるため、これは非効率的ではありません。その後のすべての promise は、既に手元にあるデータを使用してほぼ即座に解決されます。

ただし、angularFire が $routeProvider で解決されていることを確認したいと思います。より洗練された解決策が見つかるまで、この方法を回避策として使用できます。

于 2013-07-11T17:53:16.330 に答える