代码之家 › 专栏 › 技术社区 › snazzybouche

AngularJS函数到另一个文件

angularjs

snazzybouche · 技术社区 · 8 年前

我有一个AngularJS脚本(将在web上运行),一些特定的函数开始变得非常长,足够长,我已经构建了一个电子表格来生成所有不同的 case s,然后简单地粘贴到代码中。

(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 ,所以需要在主要的角度应用程序的范围内,我相信?

如何在保留对这些变量的访问权限的同时将这些函数移到其他文件中?

2 回复 | 直到 8 年前

Alyson Maia 8 年前

使用嵌套 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>

编辑:如果我需要多个控制器怎么办?

好吧,在这种情况下,我认为嵌套控制器将非常麻烦,所以您可以尝试一个具有controllers作用域实例的服务。

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>

Sachet Gupta 8 年前

也可以通过创建角度服务将方法移动到分离文件。在控制器中注入该服务并访问如下方法 someSvcHelper.reallyLongFunction(a,b) . 这一过程也将使您的方法成为通用的,并将可用于其他控制器。

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

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

8 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

8 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前