在 angular 应用程序中重复使用多个 UI-Select 的代码

Question

如果我的 angular 应用程序中有多个 ui-select 并且所有处理不同的远程 API 以显示选项，我如何重用代码？

关于 AngularJS Wrapping a ui-select in a custom directive，我有一个想法，将 ui-select 包装在自定义指令中将有助于重用代码，但我将不得不再次编写不同的代码控制器调用不同的 API 端点。

Answer 1

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

2) 否则，您将不得不为 returning 数据创建一个对象或接口，并创建一个可以处理不同 APIs.

3) 或者，您也可以使用作为对象工厂的绑定属性来创建自定义指令。然后，当你想使用它时，你必须将工厂方法提供给你的指令。

如果您不了解绑定属性，check this。

Answer 2

我按照@Floc 的回答做了一个可重用的自定义directive.If有人遇到同样的问题然后他们可以参考这个代码。

指令

  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>

并在这里传递所需的参数（在我的例子中是 url 和占位符）

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

在 angular 应用程序中重复使用多个 UI-Select 的代码

Reusing code for several UI-Select in angular app

angularjs

angularjs-directive

ui-select

指令

模板