gpt4 book ai didi

angularjs - 在 AngularJS 中控制一个 Controller 中的多个 View

转载 作者:行者123 更新时间:2023-12-02 23:28:31 25 4
gpt4 key购买 nike

遵循 MVC 模式,一个 Controller 应该能够处理 AngularJS 中的多个 View 。

例如我有一个用于显示所有用户的 View 和一个用于创建新用户的 View 。我的 $routeProvider (摘录)如下所示:

app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/showusers', {
templateUrl: 'partials/showusers.html',
controller: 'userController'
}).
when('/createuser', {
templateUrl: 'partials/showusers.html',
controller: 'userController'
})
}]);

这两个 View 共享多种方法,例如检索所有用户属性。这些共享方法是通过工厂访问的。

userController(摘录)目前看起来像这样,其中 Users 是一个工厂:

angular.module('supportModule').
controller('userController', function($scope, Users) {
var init = function(){
$scope.users = Users.getAll();
$scope.attributes = Users.getAttributes();
}
init();
})

问题是:当我在 createuser View 上时,我不需要请求 Users.getAll();

当然,我可以使用 $location$routeProvider 或纯 JS 轻松解析路由,然后有条件地调用方法 - 但我认为还有更多Angular 中优雅且高效的方式:)
就像在典型的 MVC 框架中一样,一个 Controller 有许多操作 - 每个 View 一个。

所以我的问题:
如何在控制多个 View 的 Controller 中优雅地调用基于 View 的方法?

最佳答案

在设置 $routeProvider 时,您可以使用 resolve: 根据匹配的路由将值传递给 Controller ​​。

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,
};
}
}
})
}]);

然后在 Controller 中,您可以注入(inject) resolve: 中指定的项目,如下所示:

app.controller('userController', function ($scope, Users, ctrlOptions) {
var init = function () {
if (ctrlOptions.getAllUsers) {
$scope.users = Users.getAll();
}

$scope.attributes = Users.getAttributes();
};

init();
});

希望这有帮助。

关于angularjs - 在 AngularJS 中控制一个 Controller 中的多个 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25061307/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com