问Angular -将一个控制器用于跨多个HTTP请求的多个连贯视图
EN

Stack Overflow用户

提问于 2013-12-01 12:44:58

回答 3查看 26.3K关注 0票数 12

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

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

在服务器上的另一个文件中，我有：

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

我的控制器是：

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

但是，在编辑表单中不会显示任何数据。我使用Batarang检查了作用域，但不会显示expert对象。

问题似乎是我对两个(也可以是两个以上)视图使用一个控制器。但是，正如我在SO上读到的一些其他问题一样，最佳实践似乎是每个HTML视图都有一个控制器。

然而，我认为使用一个expertController来完成所有的CRUD操作，以及其他与expert相关的操作，会更加连贯和一致。我认为用expertEditController来编辑表单，用expertListController来显示列表超文本标记语言有点难看。

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

angularjs

angularjs-scope

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-12-01 12:53:43

当然，您可以在同一个controller中使用多个views。例如:用于编辑和添加新项。

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

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

更新如果您想要在控制器之间提供一些公共/共享功能，最好的方法是创建并inject一个单独的服务。它使代码保持干燥。

票数 18

Stack Overflow用户

发布于 2015-02-05 18:32:29

下面是一个示例项目(不是我创建的)，它说明了如何使用具有两个视图的单个控制器:一个用于显示项目列表，另一个用于编辑或添加单个项目：http://embed.plnkr.co/jAK31F/

控制器中使用的基本原理是检查是否传递了单个项的id，并针对该情况运行适用的逻辑：

controllers.controller('MainController', function( $scope, $location, $routeParams, ItemService)  {
  if ($routeParams.itemid) {
    // do stuff for single item
    if ($routeParams.itemid == 0) {
      // do stuff for adding item
    } else {
      // do stuff for editing item
    }
  } else {
    // do stuff for listing multiple items
  }
});

不同的视图在路由中的配置如下：

app.config(['$routeProvider', function ($routeProvider) {
        // routes
        $routeProvider.
        when('/', {
            templateUrl: 'item_list.html',
            controller: 'MainController'
        }).
        when('/:itemid', {
            templateUrl: 'item_single.html',
            controller: 'MainController'
        });
    }]);