如何在控制器之间共享功能？

Question

我对angularjs很陌生，我想知道什么是解决此类问题的最佳实践。 我的controller1有一个用于验证注册表单的函数，该函数从我的attribute属性的uniqueField指令中调用：

$scope.validation=function(param){
    $scope.loading[param.field]=true;

    var currentPath=$location.path(); //current route
    //function for ajax web call
    var webCall = $http({
               method: 'POST',
               url: currentPath+'/validation', 
               async : true,
               headers: {
                 'Content-Type': 'application/json'
               },
               timeout:10000,
               data: param});
    webCall.then(handleSuccess,handleError); //server call
    function handleSuccess(response) { //successful web call handler
      $scope.loaded[param.field]={};
      $scope.loading[param.field]=false;
      if(response.data.status===1) {
        $scope.loaded[param.field]["available"]=true;
        $scope.loaded[param.field]["error"]=false;
        $scope.loaded[param.field]["message"]=response.data.message;
      }
      else if(response.data.status===0){
        $scope.loaded[param.field]["available"]=false;
        $scope.loaded[param.field]["error"]=false;
        $scope.loaded[param.field]["message"]=response.data.message;
      }
    }
    function handleError(response){
      $scope.loaded[param.field]={};
      $scope.loading[param.field]=false;
      $scope.loaded[param.field]["error"]=true;
      $scope.loaded[param.field]["Message"]="Cannot fetch data from server";
    };
  }
}

现在，我也想在下一个控制器中使用类似的功能。 最好的做法是什么，这样我就不必在另一个控制器中重新定义功能了？

Answer 1

服务。

控制器不是最适合定位这种类型的逻辑的，不是DOM操作和逻辑的所有内容都应该封装到服务中，然后解决这个难题。

假设您有2个控制器和一个称为validate的函数：

服务：

angular('mymodule').factory('validateService', function() {
    var service = {
        validate: function() {
        //validation logic
        }
    }
    return service;
});

Ctrl 1：

angular('mymodule').controller('MyCtrl1',['$scope', 'validateService', function($scope, validateService) {
  $scope.validate = function() {
      validateService.validate();
  }  
}]);

Ctrl 2：

angular('mymodule').controller('MyCtrl2',['$scope', 'validateService', function($scope, validateService) {
  $scope.validate = function() {
      validateService.validate();
  }  
}]);

Answer 2

使用范围层次结构

如果您要表示的是要在两个控制器之间共享全部功能（所有使用的作用域变量），只需将功能放在两个作用域的最接近的共同祖先作用域上即可。 实现此目的的最简单方法是在DOM层次结构中最接近的公共祖先元素上应用控制器。

封装功能并提供工厂

如果您的意思是需要共享功能，但每次使用都有单独的变量，则需要正确封装功能。 您可以通过为验证功能创建工厂来做到这一点：

angular.module(...).value('createSomeValidator', function () {
    return function validate (param) {
        // instead of using separate variables, use properties of this function, like:
        // validate.loading[...] = ...;
    };
});

并将该工厂注入您的控制器并使用它：

angular.module(...).controller('...', ['createSomeValidator', function (createSomeValidator) {
    $scope.validateSomething = createSomeValidator();
}]);