按照MVC模式,一个控制器应该能够在AngularJS中处理多个视图。
。我有一个视图用于显示所有用户,另一个用于创建新用户。我的$routeProvider
(节选)是这样的:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/showusers', {
templateUrl: 'partials/showusers.html',
controller: 'userController'
}).
when('/createuser', {
templateUrl: 'partials/showusers.html',
controller: 'userController'
})
}]);
两个视图共享一些方法,例如检索所有用户属性。通过factory
访问这些共享方法。
userController
(摘录)目前看起来像这样,Users
是一个工厂:
angular.module('supportModule').
controller('userController', function($scope, Users) {
var init = function(){
$scope.users = Users.getAll();
$scope.attributes = Users.getAttributes();
}
init();
})
问题是:当我在createuser
视图时,我不需要请求Users.getAll();
。
当然,我可以通过使用$location
、$routeProvider
或纯JS轻松解析路由,然后有条件地调用方法——但我认为在Angular中有一种更优雅、更有效的方法:)
就像在典型的MVC框架中,一个控制器有许多动作——每个视图一个。
我的问题是:
如何在控制多个视图的控制器中优雅地调用基于视图的方法?
您可以在设置$routeProvider
时使用resolve:
根据匹配的路由将值传递给控制器。
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/showusers', {
templateUrl: 'partials/showusers.html',
controller: 'userController',
resolve: {
ctrlOptions: function () {
return {
getAllUsers: true,
};
}
}
}).
when('/createuser', {
templateUrl: 'partials/showusers.html',
controller: 'userController',
resolve: {
ctrlOptions: function () {
return {
getAllUsers: false,
};
}
}
})
}]);
,然后在控制器中,您可以像这样注入resolve:
中指定的项:
app.controller('userController', function ($scope, Users, ctrlOptions) {
var init = function () {
if (ctrlOptions.getAllUsers) {
$scope.users = Users.getAll();
}
$scope.attributes = Users.getAttributes();
};
init();
});