Angular：如何分割（划分）控制器的脚本？

13 浏览
0 Comments

Angular：如何分割（划分）控制器的脚本？

最近我用Angular构建了一个基于网页的应用程序。我非常喜欢Angular如何处理模型-视图-控制器，所以我将控制器构建为处理按钮点击事件、日期选择器变化事件等，而业务逻辑由模型控制。问题是：我在视图中放置的按钮或控件越多，我的控制器脚本就越大。\n例如：如果我有2个按钮，我的控制器会像这样：\n

$scope.onBtn1Clicked = function(){}
$scope.onBtn2Clicked = function(){}

\n那么如果我还有10个按钮呢？还有10个函数？\n我很清楚Angular的指令，但如果我只使用一次，我不想编写指令。\n所以我认为最好将我的控制器拆分成几个“子控制器”文件，然后在“主控制器”中将它们组合起来。\n能做到吗？还是有其他解决方案？\n谢谢\n附注：我知道如何创建独立的AngularJS控制器文件？。但这是不同的：我已经将我的控制器分离到几个文件中，所以我的应用程序中的一个页面有一个控制器。我遇到的问题是这些控制器变得如此庞大，无法维护。

0

2 答案

0 Comments

问题的原因是想要在所有“子”控制器中共享变量和函数，以及在主控制器和子控制器之间建立依赖关系。解决方法是将所有控制器分开，通过服务在控制器之间共享数据。

在Angular中，可以嵌套控制器，如下所示：

myApp.controller('MainController', ['$scope', function($scope) {
  $scope.timeOfDay = 'morning';
  $scope.name = 'Nikki';
}]);
myApp.controller('ChildController', ['$scope', function($scope) {
  $scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController', ['$scope', function($scope) {
  $scope.timeOfDay = 'evening';
  $scope.name = 'Gingerbread Baby';
}]);

并在标记中使用它们：


  

    
Good {{timeOfDay}}, {{name}}!

    

      
Good {{timeOfDay}}, {{name}}!

      

        
Good {{timeOfDay}}, {{name}}!

在控制器之间共享数据可以通过服务实现。可以在控制器之间共享数据和函数，如下所示：

myApp.factory('sharedService', function() {
  var sharedData = {};
  function setSharedData(data) {
    sharedData = data;
  }
  function getSharedData() {
    return sharedData;
  }
  return {
    setSharedData: setSharedData,
    getSharedData: getSharedData
  };
});

然后在控制器中注入该服务并使用它来共享数据：

myApp.controller('MainController', ['$scope', 'sharedService', function($scope, sharedService) {
  $scope.sharedData = sharedService.getSharedData();
  $scope.updateSharedData = function(data) {
    sharedService.setSharedData(data);
  };
}]);
myApp.controller('ChildController', ['$scope', 'sharedService', function($scope, sharedService) {
  $scope.sharedData = sharedService.getSharedData();
}]);
myApp.controller('GrandChildController', ['$scope', 'sharedService', function($scope, sharedService) {
  $scope.sharedData = sharedService.getSharedData();
}]);

通过这种方式，可以在所有控制器之间共享数据和函数。

0
0 Comments

问题的原因是根据功能的不同，使用了不同的Angular组件（指令、服务、控制器），但是随着代码的增长，代码变得庞大，需要将其拆分为更小的组件。

解决方法是使用指令来控制元素的行为，使用服务来包含独立的逻辑，使用控制器来包含业务逻辑。如果逻辑可以分离，需要将其放入子控制器（指令或服务）中。可以通过编写大量的指令和控制器来解决这个问题。

解决方法的具体实现可以参考stackoverflow.com/questions/20087627/…中的回答。

0