여러 UI에 대한 코드 재사용 - 각형 응용 프로그램에서 선택

Question

각도 응용 프로그램에서 ui-select가 두 개 이상 있고 옵션을 표시하기 위해 서로 다른 원격 API를 다루는 경우 코드를 다시 사용할 수 있습니까?

AngularJS Wrapping a ui-select in a custom directive과 관련하여 커스텀 디렉티브에 ui-select를 래핑하면 리 유대 코드가 도움이되지만 다시 다른 API 엔드 포인트를 호출하는 컨트롤러에 다른 코드를 작성해야한다는 아이디어가 있습니다.

Answer 1

나는 @Floc의 답을 따라 왔고 사용자 지정 재사용 지시문을 만들었습니다. 누군가가 동일한 문제를 고집하면이 코드를 참조 할 수 있습니다.

지침

app.directive('tagInput',function($http){ 
    return{ 
    restrict : 'E', 
    templateUrl : 'tag-input.html', 
    scope:{ 
    placeholder : '@', 
    ngModel : '='  
    }, 
    link:function(scope,elem,attrs){ 
    scope.addresses = []; 
    scope.refreshAddresses = function(address){ 
    var params = {address:address,sensor:false}; 
    return $http.get(attrs.url,{params:params}) 
     .then(function(response){ 
     scope.addresses = response.data.results[0].address_components; 
     }) 
    } 
    } 
    } 
    }) 

템플릿

<ui-select style="width:50%" ng-model="$parent.ngModel" theme="select2"> 
<ui-select-match placeholder="{{placeholder}}">{{$select.selected.long_name}}</ui-select-match> 
<ui-select-choices repeat="address in addresses track by $index" refresh="refreshAddresses($select.search)" refresh-delay="0" > 
    <span ng-bind-html="address.long_name| highlight: $select.search"></span> 
</ui-select-choices> 

그리고 여기에 필요한 매개 변수를 전달

<tag-input url="https://maps.googleapis.com/maps/api/geocode/json" placeholder="hello"></tag-input> 

(내 경우는 URL과 자리 표시 자입니다)

Answer 2

1) 다른 컨트롤러를 코딩 할 필요가 없습니다. 모든 differents API가 동일한 객체 구조를 반환하면 API url을 제공하는 사용자 정의 지시문에 바인딩 속성을 추가하기 만하면됩니다. 그런 다음 사용자 지정 지시문의 컨트롤러에서 사용할 수 있습니다.

2) 그렇지 않으면 반환하는 데이터와 다른 API를 처리 할 수있는 단일 컨트롤러에 대한 개체 또는 인터페이스를 만들어야합니다.

3) 또는 개체에 대한 팩터 리인 바인딩 특성을 사용하여 사용자 지정 지정 문을 만들 수도 있습니다. 그런 다음 사용하려고 할 때 지시어에 factory 메소드를 제공해야합니다.

바인딩 속성에 대해 잘 모르는 경우 check this.