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

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();
}]);