Angular - 使用一个控制器跨多个 HTTP 请求处理多个连贯的视图 [英] Angular - Using one controller for many coherent views across multiple HTTP requests

问题描述

我有一个简单的 Angular JS 场景.我在一个视图中显示专家列表，该列表包含编辑专家的操作，这将在另一个视图中完成.这些视图来自服务器并且不在一个文件中.他们不一起加载.

<div ng-controller='expertController'><!-- 在此处显示专家列表-->

在服务器上的另一个文件中:

<div ng-controller='expertController'><!-- 编辑/添加专家的表单-->

我的控制器是:

app.controller('expertController', function ($scope) {$scope.getExperts = 函数 () {_.get('/expert/getexperts/', null, function (data) {$scope.$apply(function () {$scope.experts = 数据；});});};$scope.editExpert = 函数(索引){_.get('/expert/getexpert/', { id: $scope.experts[index].Id }, function (data) {$scope.$apply(function () {$scope.expert = 数据；});});};});

但是，编辑表单中不会显示任何数据.我使用 Batarang 检查了范围，但 expert 对象不会显示.

问题似乎是我将一个控制器用于两个(也可以选择两个以上)视图.但是，正如我阅读了一些关于 SO 的其他问题，最佳实践似乎是每个 HTML 视图有一个控制器.

但是，我认为让一个 expertController 来执行所有 CRUD 操作以及与 expert 相关的其他操作会更加连贯和一致.我认为将 expertEditController 用于编辑表单而将 expertListController 用于列表 HTML 有点难看.

这里的最佳实践是什么?我怎样才能有一个连贯且语义上命名的控制器，同时支持许多视图.到目前为止，在我见过的任何 MVC 框架中，通过一个控制器支持多个视图是一种例行公事.

解决方案

当然，您可以使用多个 views 和相同的 controller.例如:用于编辑和添加新项目.

但你必须记住，每次加载视图时，控制器都会被初始化，并且注入新的$scope.

在您的情况下，最好只使用两个单独的控制器(一个用于 experts，另一个用于 expert)并使用 -- 可选 -- 一些服务进行通信在这些之间，可能会提供一些缓存机制.

更新 如果您想在控制器之间提供一些通用/共享功能，最好的方法是创建然后注入一个单独的服务.它使代码保持干燥.

I have a simple Angular JS scenario. I show a list of experts in one view, and that list contains actions to edit an expert, which would be done in another view. These views are coming from server and are not in one file. They don't load together.

<!-- experts.html -->
<div ng-controller='expertController'>
    <!-- showing the list of experts here -->
</div>

And in another file on the server I have:

<!-- expert.html -->
<div ng-controller='expertController'>
    <!-- a form to edit/add an expert -->
</div>

And my controller is:

app.controller('expertController', function ($scope) {
    $scope.getExperts = function () {
        _.get('/expert/getexperts/', null, function (data) {
            $scope.$apply(function () {
                $scope.experts = data;
            });
        });
    };

    $scope.editExpert = function (index) {
        _.get('/expert/getexpert/', { id: $scope.experts[index].Id }, function (data) {
                $scope.$apply(function () {
                    $scope.expert = data;
                });
         });
    };
});

However, no data would be shown in the edit form. I inspected scopes using Batarang, but expert object won't be shown.

The problem seems to be that I use one controller for two (and optionally more than two) views. However, as I've read some other questions on SO, it seems that the best practice is to have one controller per HTML view.

However, I think it's more coherent and consistent to have one expertController to do all CRUD operations, alongside other actions related to expert. I think it's a little ugly to have expertEditController for edit form and expertListController for the list HTML.

What is the best practice here? How can I have a coherent and semantically named controller, and at the same time support many views. In any MVC framework that I've seen till now, it's something routine to support many views via one controller.

解决方案

Of course you can use many views with the same controller. For example: for editing and adding new items.

But you have to remember that each time the view is loaded the controller is initialized and fresh, new $scope is injected.

In your case it would be better to just use two separate controllers (one for experts and one for expert) and use -- optionally -- some service to communicate between those and maybe provide some caching mechanism.

UPDATE In case you want to provide some common/shared functionality between controllers the best way to go is to create and then inject a separate service. It keeps the code DRY.

这篇关于Angular - 使用一个控制器跨多个 HTTP 请求处理多个连贯的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！