Как определить несколько контроллеров для одного вида в angularJS?

Что я пробовал: 

 $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 работать для разных наборов изображений. В случае функций повторное использование функции обычно осуществляется путем передачи параметров. Но здесь я задаюсь вопросом, как контроллер может принимать параметры, когда он вызывается для просмотра внутри ?

3 4
javascript angularjs url-routing angular-routing

3 ответа:

GetPaintingImages и getFoodImages используют фабрику для получения изображений, которые вы говорите. Похоже, вы можете использовать что-то вроде resolve: в routeProvider, чтобы образы, необходимые imageController, были там для них, когда он вызывается.

Что-то вроде (предполагая, что ваши getPaintings и getFoods-это сервисы / фабрики, а 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){
    ...
}]);
8

Как насчет того, чтобы сделать imageController родителем: 

<body ng-controller="imageController">  
    <div ng-view></div>
</body>
6

Когда вы устанавливаете контроллер на представление, контроллер запрашивает изолированную область для представления, вы не можете иметь 2 изолированных области на одном представлении, что вызовет ошибку. Единственный вариант, который у вас есть, это применить контроллер к родительскому элементу или вызвать функцию imageController внутри первого контроллера и передать $scope

2