함수의 아웃소싱 구현에 $ http, $ scope 및 기타 매개 변수가 포함되어 있습니다.

Question

코드를 재사용하려고하는데 정확히 어떻게해야하는지 모르겠습니다.

모든 사용자가 포함 된 드롭 다운 목록이 있습니다. 사용자를 클릭하면

$scope.UserHasBeenSelected = function (username) { 

실행됩니다. 괜찮아. 그러나 사용자가 다른 페이지의 링크를 클릭하고 사용자를이 페이지로 리디렉션하지만 선택된 사용자의 이름을 매개 변수로 갖는 경우 동일한 출력을 얻고 싶습니다. 그것을 할 수 있기 위해서, 나는 코드를 복제해야만했다. 기본적으로 나쁜 접근이다.

I는 다음과 같습니다 내 템플릿 HTML을위한 컨트롤러를 가지고 :

var MonthlySummaryController = function ($scope, $http, $stateParams) { 

//FILL IN the drop-downList 
$http.get('DataProviderService.asmx/GetUsersAndTheirState') 
.then(function (response) { 
    $scope.users = response.data; 
}); 

//COPY-PASTE From HERE 
if ($stateParams.userName) { 
    //Do something with the username 
    ... 
} 
//COPY-PASTE To HERE 
... 

// if a user has been picked: (This is the method which can be called outside the HTML) 
$scope.UserHasBeenSelected = function (username) { 
    //Do THE SAME with the username as before. (This is the inner code which is duplicated) 
    ... 
} 

angular.module("Home").controller("monthlySummaryController", MonthlySummaryController); 

에서 볼 수있는 바와 같이

, 내가 코드를 포함하는 기능을 가지고 있고,이 경우 동일한 기능을 수행 할를 복제했다 매개 변수가 주어진다.

함수로 아웃소싱하는 방법을 알고 컨트롤러 자체에서 호출하는 방법이 있습니까?

Answer 1

당신이 필요로하는 것은 중복 코드를 service으로 옮기는 것입니다. 이 같은 서비스를 만들 수 있습니다

yourApp.service('yourServiceName', function() { 
    return { 
     yourDuplicateMethod: function (userName) { 
      // Do all the stuff with the username here... 
     } 
    } 
}); 

을 그리고 그것을 주입 사용 컨트롤러에서 사용 :

var MonthlySummaryController = function ($scope, $http, $stateParams, yourServiceName) { 

//FILL IN the drop-downList 
$http.get('DataProviderService.asmx/GetUsersAndTheirState') 
.then(function (response) { 
    $scope.users = response.data; 
}); 

//COPY-PASTE From HERE 
if ($stateParams.userName) { 
    yourServiceName.yourDuplicateMethod($stateParams.userName); 
} 
//COPY-PASTE To HERE 
... 

// if a user has been picked: (This is the method which can be called outside the HTML) 
$scope.UserHasBeenSelected = function (username) { 
    yourServiceName.yourDuplicateMethod(userName); 
} 

angular.module("Home").controller("monthlySummaryController", MonthlySummaryController);