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

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正在使用工厂来获取您说的图像。 听起来你可以在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){
    ...
}]);

Answer 2

如何使imageController成为父：

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

Answer 3

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

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

问题描述

3 个解决方案

解决方案1
8 已采纳 2013-12-29 22:51:12

解决方案2
6 2013-10-31 07:14:53

解决方案3
2 2013-10-31 08:43:24

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

问题描述

3 个解决方案

解决方案1 8 已采纳 2013-12-29 22:51:12

解决方案2 6 2013-10-31 07:14:53

解决方案3 2 2013-10-31 08:43:24

解决方案1
8 已采纳 2013-12-29 22:51:12

解决方案2
6 2013-10-31 07:14:53

解决方案3
2 2013-10-31 08:43:24