Question

在我工作的当前项目中，我有一个控制器来处理在网格上进行的操作。像删除编辑添加新行初始化验证等。开头的每件事情都很好，但随着操作的增加，文件变成了很长的文件而且很难找到东西和工作。我将在下面添加一个示例代码来描述我的问题。

我的问题：有没有办法将控制器扩展到多个文件？或者有更好的方法来解决我的问题吗？

app.js

var myApp = angular.module('myApp', ['mainControllers']);

gridCntrl

mainControllers.controller('mainController', ['$scope', function ( $scope) {
  $scope.init = function () {
    alert('I am initialized');
       };
  $scope.click = function () {
    alert('I am clicked');
       };

}]);

更清楚的是有一种方法可以将$ scope.init和$ scope.click分开在同一个控制器下，但是在单独的文件中？感谢

Answer 1

正如评论中所建议的，您应该评估控制器如此之大的原因。

控制器应该只在ViewModel和Model之间定义ViewModel和marshal数据。

如果您有业务逻辑，请将其移至服务。

否则，如果您有独立的功能区域，请将其分解为多个控制器。不要害怕创建控制器。

假设您有一个带有控制面板的应用程序，它定义了一些配置，主视图和其他部分（如UserProfile）。尽管它们可能总是在UI中并排显示（实际上，通过相同的View），但控制面板UI逻辑（当用户与其交互时显示/启用/添加的内容）应该封装在controlPanelController中，一个或多个其他控制器中的主要应用程序交互。

所以，你可以这样做：

<div ng-controller="mainCtrl">
   <div ng-controller="controlPanelCtrl" ng-include="'partial/controlpanel'"></div>
   <div ng-controller="mainViewCtrl" ng-include="'partial/mainview'"></div>
   <div ng-if="isUserLoggedIn()" ng-controller="profileInfoCtrl ng-include="'partials/profile'"></div>
</div>

.controller("mainCtrl", function($scope, ConfigSvc, UserService){
  $scope.config = ConfigSvc;
  $scope.isUserLoggedIn = UserService.isLoggedIn;
})

.controller("controlPanelCtrl", function($scope, ConfigSvc){
  $scope.config = ConfigSvc;
  $scope.changeColor = function(color){ ConfigSvc.color = color; };
})

.controller("mainViewCtrl", function($scope, ConfigSvc){
  $scope.color = ConfigSvc.color;
})

更广泛的一点是，将控制器分成多个控制器，而不是一个在多个文件中定义的控制器。

扩展角度控制器

1 个答案: