Question

我有一段代码要在其他HTML页面中使用。我正在谈论以下代码：

<h5>Brand</h5>
<div>
  <div ng-repeat="brand in store.brands.tops">
    <label>
      <input type="checkbox" ng-true-value="'{{brand}}'" ng-model="selectedBrands[$index]"/>
      {{brand}}
    </label>
  </div>
</div>

我已将上述代码放在单独的HTML文件中并为其制定了指令，因此我可以在其他HTML页面中使用它。代码如下：

angular.module('store').directive('brandCheckboxes', function(){
  return {
    restrict: 'E',
    templateUrl: 'templates/brand-checkboxes.html',
  };
});

但是，当我想在另一个HTML页面中使用它时，模板中的代码必须略有不同。只有部分ng-repeat必须改变，如下所示：

<h5>Brand</h5>
<div>
  <div ng-repeat="brand in store.brands.bottoms">
    <label>
      <input type="checkbox" ng-true-value="'{{brand}}'" ng-model="selectedBrands[$index]"/>
      {{brand}}
    </label>
  </div>
</div>

有没有办法将参数传递给指令，并且ng-repeat会根据传入的参数而改变？因此<brand-checkboxes category="tops"></brand-checkboxes>生成第一个代码块，<brand-checkboxes category="bottoms"></brand-checkboxes>生成后一个代码块。

Answer 1

我希望该指令采用类似

的列表

return {
    restrict: 'E',
    templateUrl: 'templates/brand-checkboxes.html',
    scope: {
            list: '=',
            ngModel: '='
        }
  };

和html中的指令标记

<brand-checkboxes list="somearray" ng-model="someVar"></brand-checkboxes>

然后在你的指令中html将是：

<h5>Brand</h5>
<div>
  <div ng-repeat="brand in list">
    <label>
      <input type="checkbox" ng-true-value="'{{brand}}'" ng-model="ngModel"/>
      {{brand}}
    </label>
  </div>
</div>

这样您就可以将要重复的列表传递给指令。

如何为多个代码块创建模板扩展指令，这些代码块在ng-repeat中只是彼此不同？

1 个答案: