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

【问题标题】：How to define multiple controllers for one view in angularJS?如何在angularJS中为一个视图定义多个控制器？
【发布时间】：2013-10-31 06:32:06
【问题描述】：

我尝试了什么：

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

【问题讨论】：

标签： javascript angularjs url-routing angular-routing

【解决方案1】：

getPaintingImages 和 getFoodImages 正在使用工厂来获取您说的图像。听起来您可以在 routeProvider 中使用类似 resolve: 的东西，以便在调用 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){
    ...
}]);

【讨论】：

【解决方案2】：

如何让 imageController 成为父级：

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

【讨论】：

【解决方案3】：

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

【讨论】：