Question

我有角度js控制器女巫越来越大，所以我想将一些功能从它分离到分离的文件，但我无法在其他文件中访问该控制器的范围。这样做的最佳做法是什么？

例如，如果这是app.js中的我的控制器

formAppControllers.controller('mainController', function($scope,$translate) {});

我希望能够在functions.js文件中使用相同的$ scope。

Answer 1

这可能不是您正在寻找的答案，但我会反过来这样做：我将定义服务并在控制器中使用它们变得拥挤。这样，您就可以避免访问其他地方的$scope。

像service.js这样的地方：

    var someService = angular.module('someService');
    someService.factory('subService', function () {
        var methodName = function (arg) {
            // do something
        }
    });

在带有应用程序逻辑的Angular模块中，执行以下操作：

var mainApp = angular.module('mainApp', ['someService']);

然后当然;

mainApp.controller('mainCtrl', function ($scope, subService) {
    // controller stuff
    subService.methodName(arg); // etc
});

Answer 2

我知道这不是你所要求的，但是，如果你有一个控制器“需要”分成几个文件，首先你应该考虑，然后进入«让我们将这个控制器分成几个文件» ，开始识别你可以放在服务中的部分和你可以在指令内推的部分。

进行非UI相关处理的逻辑片段应该放在服务或多个服务中，然后可以在主控制器上注入。

具有执行DOM操作或使用数据填充DOM元素的可重用性的片段，您应该考虑将这些片段放在Directives中。您不仅可以获得更清晰的视图，而且还可以减少违反DRY（不要重复自己）原则的机会。

如果这些问题无法解决问题，您可以创建子控制器并创建事件发射器，以便在父控制器和子控制器之间来回通信。

这方面的一个例子是：

HTML

    <div ng-controller="mainCtrl">

       {{title}}
       {{childCtrlMessage}}

       <div ng-controller="child1Ctrl">

           {{subTitle}}
           {{mainCtrlMessage}}

       </div>

    </div>

控制器mainCtrl

    angular.module('myapp').controller('mainCtrl',function($scope){

        $scope.title = 'Main Controller';

        $scope.$on('myCustomChildEvent',function(data){

              $scope.childCtrlMessage = data.message;   

        });

       $scope.$broadcast('myCustomMainEvent', {mainMessage: 'Hi! I came from the Main Controller', someProperty: someObject /*ignore 'someProperty: someObject', it's just to state the point that you can pass in any data*/});

    });

child1Ctrl

   angular.module('myapp').controller('child1Ctrl',function($scope){

        $scope.subTitle = 'Child Controller 1'

        $scope.$on('myCustomMainEvent',function(data){

              $scope.mainCtrlMessage = data.mainMessage;   

        });

       $scope.$emit('myCustomChildEvent', {message: 'Hi! I came from the Child 1 Controller!'});

    });

请注意，我在父控制器上使用$ broadcast，在子控制器上使用$ emit。当你想要向下发送数据时使用$ broadcast，当你想要向上发送数据时使用$ emit。

Angular js在分隔文件中的$ scope相同

2 个答案: