Wiederverwendung von Code für mehrere UI-Select in eckigen App

Question

Wie kann ich Code wiederverwenden, wenn ich mehr als ein ui-select in meiner eckigen App habe und alle mit verschiedenen Remote-API zu tun, um Optionen anzuzeigen?

Mit Bezug auf AngularJS Wrapping a ui-select in a custom directive, habe ich eine Idee, dass das Wrappen von ui-select in benutzerdefinierten dire zu reuse Code hilft, aber wieder muss ich anderen Code für Controller schreiben, um verschiedene API-Endpunkte aufzurufen.

Answer 1

Ich habe die Antwort von @Floc befolgt und es geschafft, eine benutzerdefinierte wiederverwendbare Direktive zu erstellen. Wenn jemand mit demselben Problem festsitzt, dann können sie diesen Code beziehen.

Richtlinie

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

Vorlage

<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> 

Und hier erforderlichen Parameter übergeben (in meinem Fall ist es url und Platzhalter)

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

Answer 2

1) Sie müssen nicht verschiedene Controller codieren. Wenn alle differences API die gleichen Objektstrukturen zurückgeben, müssen Sie lediglich ein bindendes Attribut zu Ihrer benutzerdefinierten Anweisung hinzufügen, die die API-URL angibt. Dann kann der Controller Ihrer benutzerdefinierten Anweisung diesen verwenden.

2) Andernfalls müssen Sie ein Objekt oder eine Schnittstelle für die zurückkehrenden Daten und einen einzelnen Controller erstellen, der mit den verschiedenen APIs umgehen kann.

3) Oder Sie können auch Ihre benutzerdefinierte Anweisung mit einem Bindungsattribut erstellen, das eine Factory für Ihre Objekte ist. Dann müssen Sie Ihrer Anweisung die Factory-Methode zuweisen, wenn Sie sie verwenden möchten.

Wenn Sie nichts über verbindliche Attribute wissen, check this.