How to define multiple controllers for one view in angularJS?

Question

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 ?

Florence Foo · Accepted Answer · 2013-12-29 22:51:12Z

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

AlwaysALearner · Accepted Answer · 2013-10-31 07:14:53Z

6

How about making imageController the parent:

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

answered Oct 31, 2013 at 7:14

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Comments

iConnor · Accepted Answer · 2013-10-31 08:43:24Z

2

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

answered Oct 31, 2013 at 8:43

iConnor

20.2k14 gold badges66 silver badges98 bronze badges

Collectives™ on Stack Overflow

How to define multiple controllers for one view in angularJS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related