AngularJS函数到另一个文件

Question

我有一个AngularJS脚本（将在网络上运行），并且一些特定的功能开始变得非常长，足够长，以至于我已经建立了一个电子表格来生成所有不同的case ，然后将其粘贴到代码中。

(function(){
    var app = angular
        .module('app',[])
        .controller('HostController',HostController);

    HostController.$inject = ['$scope'];
    function HostController($scope){

        var host = this;
        host.variable = "some text";

        function reallyLongFunction(a,b) {
            switch(a) {
                case "something":
                    switch(b) {};
                    break;
                case "something else":
                    switch(b) {};
                    break;
            };
        }
    }
})();

我想将它们移出主文件，以便在我处理程序的其余部分时，不会因这些冗长的生成函数而混乱。

我可以直接将函数直接移动到另一个文件中，但是我认为它们需要访问类型host.variable的变量，所以我需要将其纳入主要Angular应用程序的范围内吗？

如何在保留对这些变量的访问权限的情况下将这些函数移至其他文件中？

Answer 1

您还可以通过创建角度服务将方法移动到单独的文件。在您的控制器中插入该服务，然后访问someSvcHelper.reallyLongFunction(a,b)之类的方法。这种方法还将使您的这种方法成为通用方法，并且也可用于其他控制器。

但是在这种情况下，您将必须将此函数所需的变量作为参数传递。

Answer 2

使用嵌套的ng-controller，您可以访问$scope中的其他控制器范围。

angular.module('app', [])
    .controller('ctrl', function() {
      var vm = this;
      vm.value = 1;
    })
    .controller('auxCtrl', function($scope) {
      var aux = this;
      aux.result = function() {
        return $scope.vm.value + 5;
      }
    });

<div ng-app="app" ng-controller="ctrl as vm">
  <div ng-controller="auxCtrl as aux">
    <input type="number" ng-model="vm.value" /> <br/>
    {{vm.value}} <br/>
    {{aux.result()}}
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>

编辑：如果我需要多个控制器怎么办？

好吧，在这种情况下，我认为嵌套控制器确实很麻烦，因此您可以尝试具有控制器范围实例的服务。

angular.module('app', [])
  .service('greeter', function() {
    const self = this;
    self.scope = {};
    self.use = scope => self.scope = scope;
    self.greet = () => 'Hello, ' + self.scope.myName;
  })
  .service('fareweller', function() {
    const self = this;
    self.scope = {};
    self.use = scope => self.scope = scope;
    self.farewell = () => 'Goodbye, ' + self.scope.myName;
  })
  .controller('ctrl', function($scope, greeter, fareweller) {
    $scope.myName = 'Lorem Ipsum';
    $scope.greeter = greeter;
    $scope.fareweller = fareweller;
    greeter.use($scope);
    fareweller.use($scope);
  });

<div ng-app="app" ng-controller="ctrl">
  <input type="text" ng-model="myName"> <br>
  {{greeter.greet()}} <br>
  {{fareweller.farewell()}} <br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>