current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

What I tried :

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

I wanted getPaintingImages and getFoodImages to get the list of paintings/foods from a factory, and imageController to manipulate the images. But only first controller gets called.

Earlier I wrote code to get the images in imageController only, 

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

As I am a beginner in angularJS, I am not sure if creating multiple controllers a solution for re-using imageController ? If yes how to do this, if not how to re-use imageController to work for different set of images. In case of functions, re-use of function is generally by parameter passing. But here I am wondering how can a controller take parameters as it gets called for a view internally ?

share|improve this question

3 Answers 3

up vote 6 down vote accepted

getPaintingImages and getFoodImages are using a factory to get the images you say. It sounds like you could use something like resolve: in the routeProvider so that the images the imageController needs are there for them when it is called.

Something like (assuming your getPaintings and getFoods are services/factory and get images are something that returns a $promise that resolve into images i.e. $http request):

$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();
            }
        }
    })

Then you could just access images like:

myWebsite.controller('imageController', ['$scope', 'images', function ($scope, images){
    ...
}]);
share|improve this answer
up vote 2 down vote

When you set a controller on a view the controller requests an isolated scope for the view, you cannot have 2 isolated scopes on the same view, that would cause an error. The only options you have is to apply the controller to the parent, or call the imageController function inside the first controller and pass the $scope

share|improve this answer
up vote 4 down vote

How about making imageController the parent:

<body ng-controller="imageController">  
    <div ng-view></div>
</body>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.