如何在angularJS中为一个视图定义多个控制器？
[英]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 the list of paintings/foods from a factory, and imageController to manipulate the images. 我想让getPaintingImages和getFoodImages从工厂获取绘画/食物列表，并使用imageController来操作图像。 But only first controller gets called. 但只有第一个控制器被调用。
Earlier I wrote code to get the images in imageController only, 之前我写过代码只在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 am a beginner in angularJS, I am not sure if creating multiple controllers a solution for re-using imageController ? 由于我是angularJS的初学者，我不确定是否为多个控制器创建了重用imageController的解决方案？ If yes how to do this, if not how to re-use imageController to work for different set of images. 如果是，如何执行此操作，如果不是如何重新使用imageController来处理不同的图像集。 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 ? 但是在这里我想知道控制器如何在内部调用视图时获取参数？
3 个解决方案
解决方案1
8 已采纳 2013-12-29 22:51:12
getPaintingImages and getFoodImages are using a factory to get the images you say. getPaintingImages和getFoodImages正在使用工厂来获取您说的图像。 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. 听起来你可以在routeProvider中使用像resolve这样的东西，这样在调用时，imageController需要的图像就在那里。
Something like (assuming your getPaintings and getFoods are services/factory and get images are something that returns a $promise that resolve into images ie $http request): 类似的东西（假设你的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();
}
}
})
Then you could just access images like: 然后你可以访问像这样的图像：
myWebsite.controller('imageController', ['$scope', 'images', function ($scope, images){
...
}]);
解决方案2
6 2013-10-31 07:14:53
How about making imageController the parent: 如何使imageController成为父：
<body ng-controller="imageController">
<div ng-view></div>
</body>
解决方案3
2 2013-10-31 08:43:24
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. 在视图上设置控制器时，控制器请求视图的隔离范围，在同一视图上不能有2个隔离的范围，这会导致错误。 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 您唯一的选择是将控制器应用于父级，或调用第一个控制器内的imageController函数并传递$scope
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.