Question

我正在为所有控制器重复相同的代码。

E.g

$scope.CANCELLATION_IN_PROCESS = function(getOrder) {
    return getOrder.status == 'ORDER_PLACED' && getOrder.cancellableStatus == 'CANCELLATION_IN_PROCESS' && getOrder.returnableStatus == 'NON_RETURNABLE';
}

我们在dom视图中使用CANCELLATION_IN_PROCESS来显示/隐藏硬编码消息。

有没有办法优化代码。

我尝试过使用服务，但我无法应用于视图。 param＆＃34; getOrder＆＃34;的问题因为它只能在视图中使用，并且在我的控制器中使用服务保持未定义。

由于 MG

Answer 1

此功能可以附加到$rootScope：

angular.module('myModule').run(function($rootScope) {
    $rootScope.CANCELLATION_IN_PROCESS = function(getOrder) {
        return getOrder.status == 'ORDER_PLACED' && getOrder.cancellableStatus == 'CANCELLATION_IN_PROCESS' && getOrder.returnableStatus == 'NON_RETURNABLE';
    }
});

然后只在应用程序模板的任何部分使用：

CANCELLATION_IN_PROCESS(order)

Answer 2

将方法移动到应用程序顶部的基本控制器（如果需要，创建），并使用controllerAs语法。将其命名为baseCtrl，并在html中使用baseCtrl.CANCELLATION_IN_PROCESS。

Answer 3

如果您想重用和抽象控制器中的逻辑，那么我认为可以采用一种服务。由于服务是单例，因此不会为您使用它的每个控制器一次又一次地创建该函数。

要在视图中使用服务方法，必须使用scope方法绑定service方法，如果使用controllerAs语法，则必须绑定ViewModel。

这样的事情：

.service('statusService',function(){
     this.CANCELLATION_IN_PROCESS = function(getOrder) {
        return getOrder.status == 'ORDER_PLACED' && getOrder.cancellableStatus == 'CANCELLATION_IN_PROCESS' && getOrder.returnableStatus == 'NON_RETURNABLE';
     }

现在在每个使用它的控制器中注入服务，然后绑定到视图。就像这样：

.controller('xyz',function($scope,statusService){
    $scope.cancellation_in_process=statusService.CANCELLATION_IN_PROCESS;
});

您的观点将与之前保持一致。然而，这是一种更干燥的方式，逻辑（或模型）在于服务。控制器只是将视图连接到模型。由于服务是单例，因此重用逻辑，而不是为每个控制器再次创建

Answer 4

这样做的一种方法是将功能放在主控制器中。默认情况下，子控制器继承主控制器范围，因此当您从子控制器调用该函数时，该函数将可用。

在masterCtrl中创建并定义功能，如下所示

app.controller('mainCtrl', ['$scope', function ($scope) {

    $scope.CANCELLATION_IN_PROCESS = function(getOrder) {
        return getOrder.status == 'ORDER_PLACED' && getOrder.cancellableStatus == 'CANCELLATION_IN_PROCESS' && getOrder.returnableStatus == 'NON_RETURNABLE';
    }
}]);

将这个或类似的结构应用于其中masterCtrl包裹在其他控制器周围的html

<body ng-controller="masterCtrl">

    <div ng-controller="childCtrl1">
    ....
    <a ng-click="CANCELLATION_IN_PROCESS(yourOrder)">Test</a>
    ....

    <div ng-controller="childCtrl2">
    ....

如果您需要在控制器中添加自定义版本的CANCELLATION_IN_PROCESS函数，则只需在该控制器中添加该函数并应用更改

app.controller('childCtrl2', ['$scope', function ($scope) {

    $scope.CANCELLATION_IN_PROCESS = function(getOrder) {
        return getOrder.status == 'ORDER_PLACED in child';
    }
}]);

Answer 5

我不知道您的确切代码，因此这里有一些可能满足您需求的虚拟代码段

这是服务的虚拟代码段

.factory('factory_name', function() {
    var obj = {};
    var ObjFactory = {
       obj : obj
    }
});

这是控制器的虚拟片段

.controller('controller_name', function(factory_name) {
    $scope.obj = factory_name.obj;
});

现在你的$ scope.obj可以访问该工厂的所有功能你可以像控制器功能一样从视图中调用它

AngularJS中可重用的功能或服务

5 个答案: