Question

我正在尝试构建一个搜索引擎选择指令，其中有2个下拉菜单（1个用于搜索引擎，1个用于国家/地区）
但是，我已经设法让它工作，但我希望能够在选择第一个搜索引擎之后添加另一个搜索引擎，但是，将它们限制为最多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>

如果没有它们共享相同的数据，我怎么能复制指令？

以下是演示plunker

Answer 1

我在您的指令上使用ng-repeat解决了您的问题。

这是一个有效的plunker

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

<强>控制器

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

如果您想限制为三个搜索引擎，只需在“addAnother”功能中添加限制

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

1 个答案: