Geek Answers Handbook

How to define multiple controllers for one view in angularJS?

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 a list of paintings / products from the factory and imageController for image management. But only the first controller is called.

I used to write code to get images only in 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];
    };
});

As I'm new to angularJS, I'm not sure if creating multiple controllers is a solution to reusing imageController? If so, how to do it, if not, how to reuse imageController to work with different sets of images. In the case of functions, reuse of a function usually occurs by passing parameters. But here I am wondering how a controller can take parameters, since it is called for internal representation?

+4
3

getPaintingImages getFoodImages factory , . , - : routeProvider, , , , .

- ( getPaintings getFoods / factory, - , $, , $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();
            }
        }
    })

, :

myWebsite.controller('imageController', ['$scope', 'images', function ($scope, images){
    ...
}]);
+8

imageController :

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

When you install the controller on a view, the controller requests an isolated scope, you cannot have selected areas on the same view, which will lead to an error. The only parameters you have is to apply the controller to the parent or call a function imageControllerinside the first controller and pass$scope

+2
source

More articles:


All Articles