複数の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）また、オブジェクトのファクトリであるバインド属性を使用してカスタムディレクティブを作成することもできます。次に、使用するときには、ディレクティブにファクトリメソッドを渡す必要があります。

バインディング属性についてわからない場合は、check this。