Question

我尝试了什么：

 $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来处理不同的图像集。在函数的情况下，函数的重用通常是通过参数传递。但在这里我想知道控制器如何在内部调用视图时获取参数？

Answer 1

getPaintingImages和getFoodImages正在使用工厂来获取您说的图像。听起来你可以使用像resolve一样的东西：在routeProvider中，这样当调用它时，imageController需要的图像就在那里。

类似的东西（假设你的getPaintings和getFoods是服务/工厂并且获取图像的东西会返回$ 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){
    ...
}]);

Answer 2

如何将imageController设为父级：

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

Answer 3

当您在视图上设置控制器时，控制器会请求视图的隔离范围，您不能在同一视图上有2个隔离的范围，这会导致错误。您唯一的选择是将控制器应用于父控制器，或调用第一个控制器内的imageController函数并传递$scope

如何在angularJS中为一个视图定义多个控制器？

3 个答案: