4

私が試したこと：

 $routeProvider
     .when('/paintings',
         {
             controller: 'imageController' , 'getPaintingImages'
             templateUrl: 'paintings.html'
         })
     .when('/foods',
         {
             controller: 'imageController' , 'getFoodImages'
             templateUrl: 'food.html'
         })

getPaintingImages と getFoodImages で工場から絵画/食品のリストを取得し、imageController で画像を操作したいと考えていました。ただし、最初のコントローラーのみが呼び出されます。

以前、imageController のみで画像を取得するコードを書きましたが、

myWebsite.controller('imageController', function imageController($scope, getPaintings){

    $scope.images = getPaintings.images();                // but need to make this work for different set of images
    $scope.imageCount = countObjectElements($scope.images);     
    $scope.selectedImage = $scope.images[0];
    $scope.selectedImageIndex = 0;

    $scope.updateSelectedImage = function(img) {        
        $scope.selectedImage = img;
        $scope.selectedImageIndex = $scope.images.indexOf(img);     
    };  
    $scope.updateSelectedImageIndex = function(val) {       

        alert($scope.imageOf);
        if($scope.selectedImageIndex <= 0)
            $scope.selectedImageIndex = $scope.imageCount;

        $scope.selectedImageIndex = ($scope.selectedImageIndex + val) % $scope.imageCount;      
        $scope.selectedImage = $scope.images[$scope.selectedImageIndex];
    };
});

私は angularJS の初心者なので、複数のコントローラーを作成することが imageController を再利用するための解決策になるかどうかわかりません。はいの場合はこれを行う方法、そうでない場合は imageController を再利用して別の画像セットで機能する方法。関数の場合、関数の再利用は通常、パラメーターの受け渡しによって行われます。しかし、ここで、コントローラーが内部的にビューに対して呼び出されたときに、コントローラーがパラメーターを取得するにはどうすればよいのでしょうか?

4

3 に答える 3

8

getPaintingImages と getFoodImages はファクトリを使用して、あなたが言う画像を取得します。routeProvider で resolve: のようなものを使用できるように思えます。これにより、imageController が呼び出されたときに必要な画像が存在するようになります。

次のようなもの (getPaintings と getFoods が services/factory であり、get images がイメージに解決される $promise を返すもの、つまり $http リクエストであると仮定します):

$routeProvider
    .when('/paintings', {
        controller: 'imageController',
        templateUrl: 'paintings.html',
        resolve: { 
            images: function($q, getPainting) {
                getPainting.images();
            }
        }
    })
    .when('/foods', {
        controller: 'imageController',
        templateUrl: 'food.html',
        resolve: { 
            images: function($q, getFoods) {
                getFoods.images();
            }
        }
    })

次に、次のような画像にアクセスできます。

myWebsite.controller('imageController', ['$scope', 'images', function ($scope, images){
    ...
}]);
于 2013-12-29T22:51:12.523 に答える