Question

我是AngularJS的新手，我正在做一个AngularJS应用程序的重构，我注意到有一个控制器文件包含许多操作和设置范围变量的函数。

举个例子：

test.controller('testCtrl', function testCtrl($scope) {

    $scope.init_filters = function() {
        $scope.filter_1 = [];
        $scope.filter_2 = [];
        $scope.filter_3 = [];
        $scope.filter_4 = [];
        $scope.filter_5 = [];
    };

    $scope.showChanges = function() {
        if ($scope.item_list.length > 0) {
            $scope.messages = [];
            for (var i = 0; i < $scope.item_list.length; i++) {
                $scope.messages.push($scope.item_list[i].message);
            }
            $scope.another_function();
        }else{
            // other stuff
        }  
    };

    //other functions like these

}

所以，我想将这些函数拆分为多个JS文件。我搜索了这个问题，我发现在很多情况下使用了一个服务。但我认为这不是我的情况，因为我需要直接在控制器的范围内工作。
我的意思是，我不想要一个单独的函数来获取一些范围变量作为参数并返回变量。

那么，做这样的事情的最佳做法是什么？有可能吗？

Answer 1

如果要使用多个文件，则通过将范围传递给另一个方法，然后在那里定义其余方法，将定义拆分为多个文件。

<强> File1中

app.controller('CtrlOne', function($scope){
app.expandControllerCtrlOne($scope);

});

<强>文件2

app.expandControllerCtrlOne = function($scope)
{

}

选中此video

Answer 2

正如您所说，您为控制器找到的代码很大，因此角度js中有多种方法可以实现代码分离。

我建议你采用以下方法：

使用服务在其他地方添加您需要的代码，并且您知道此代码不需要范围对象..
使用工厂添加一些Utility类功能。不再需要范围对象的逻辑集合......
由于控制器代码太大，我认为 View / UI 也是如此... 因此，您可以使用为视图中的部分创建指令。无论你认为这个视为和平的部分可以是独立的逻辑功能，你可以进入指令。使用范围创建指令有三种方法：

一个。共享范围B.隔离范围C：共享和隔离范围

通过这种方式，您至少可以使控制器代码可读并且看起来模块化。

让我们说::

module.controller('longRunController', function() {


    @TYPE 1 code
    // some code which fetch dat from API
    // some code which save variable and objects which can used in another controller or directives
    // some code which need to passed to other controller even after route changes


    @TYPE 2
    // some code which is only related this controller but has some bussiness logic
    // some code which is a kind of utility functino

    @TYPE 3
    // all $scope related variable $watch, $scope and related variables
    // some code of perticular section of which VIEW which handle by this controller

});

在上面的模式中考虑您的控制器代码：

因此，可以将类型1代码移至服务
类型2代码可以移至工厂
类型3代码可以移动到指令

Answer 3

您可以将$scope作为参数传递给外部函数。因为您只使用了对象引用，所以您在外部函数中所做的所有更改都是在控制器的$scope对象上进行的。

test.controller('testCtrl', function testCtrl($scope) 
{
   showChanges($scope);
});


...

function showChanges(scope)
{
    scope.param1 = "Hello World";
}

AngularJS - 在多个文件中拆分控制器功能

3 个答案: