AngularJS：单击时重复指令，而不在元素之间共享相同的数据

我正在尝试建立一个搜索引擎选择指令，其中有两个下拉列表（一个用于搜索引擎，一个用于国家）
然而，我已经设法让它工作，但我想能够添加另一个搜索引擎后，第一个已经被选中，但也限制他们最多3个搜索引擎

这是我被卡住了，因为复制指令显然会使所有3个搜索引擎的选择相同

在

HTML

中，指令如下所示：

<wiz-engine-selector>
    <wiz-engine selected-engine="knc.selectedEngine"></wiz-engine>
    <wiz-country selected-country="knc.selectedCountry"></wiz-country>
</wiz-engine-selector>

有没有办法在不共享相同数据的情况下复制指令

---

这是一个演示

我在您的指令中使用ng重复解决了您的问题

这是一张工作票

HTML

    <wiz-engine-selector ng-repeat="engineSelector in engineSelectors">
        <wiz-engine selected-engine="engineSelector.selectedEngine"></wiz-engine>
        <wiz-country selected-country="engineSelector.selectedCountry"></wiz-country>
    </wiz-engine-selector>

如果您想限制三个搜索引擎，只需在“AddOther”函数中添加一个限制

app.controller('MainCtrl', function($scope) {

  //Each engineSelector will have its own set of variables into the engineSelectors array.
  $scope.engineSelectors = [{
    selectedEngine : { icon:{}, name:{} },
    selectedCountry : { flag:{}, name:{} } 
  }];
  $scope.addAnother = function(){
     $scope.engineSelectors.push({
        selectedEngine : { icon:{}, name:{} },
        selectedCountry : { flag:{}, name:{} } 
     });
  };
})