Angularjs 在angular应用程序中为多个UI选择重用代码

如果我在angular应用程序中选择了多个ui，并且所有ui都处理不同的远程API以显示选项，那么如何重用代码

关于，我有一个想法，在自定义目录中包装ui select将有助于重新编写代码，但我必须为控制器编写不同的代码来调用不同的API端点。

1）您不必为不同的控制器编写代码。如果所有不同的API返回相同的对象结构，则只需向提供API url的自定义指令添加绑定属性。然后，自定义指令的控制器将能够使用它

2）否则，您必须为返回的数据创建一个对象或接口，并创建一个可以处理不同API的控制器

3）或者，您也可以使用绑定属性创建自定义指令，该属性是对象的工厂。然后，当您想要使用指令时，您必须将工厂方法指定给它

---

如果您不知道绑定属性，.

我遵循@Floc的答案，并设法制定了一个自定义的可重用指令。如果有人遇到同样的问题，那么他们可以参考此代码

指示 模板

{{$select.selected.long_name}

并在此处传递所需参数（在我的示例中是url和占位符）

  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>