Javascript 角度自定义复选框指令在ng repeat中不起作用

我已经为复选框创建了一个自定义指令，可以在我的应用程序中使用。我用以下代码创建了复选框

JS

angular.module("myApp")
    .component("ngCheckbox", {
       template:
           '<div class="ng-control-checkbox">' +
           '<input id="check" type="checkbox" data-ng-model="$ctrl.checked" class="checkbox">' +
           '<label for="check">'+
           '<span data-ng-bind="$ctrl.label"></span>' +
           '</label>' +
           '</div>' +
           '',   

        bindings: {
            label: '=?',
            checked: '='
        },
        controller: function () {
            var $ctrl = this;
        }
    });

  .ng-checkbox label{
      cursor: pointer;
      margin-left: 20px;
  }
  .ng-checkbox label:before {
     content: "\e911";
     cursor: pointer;
     color: #84919A;
  }
  .checkbox {
    display: none;
  }
  .checkbox:checked + label:before {
   content: "\e910";
    cursor: pointer;
    color: $color_forest_green;
  }

HTML

      <div data-ng-repeat="notification in notificationList" >
        <ng-checkbox data-checked="notification.selected"></ng-checkbox>
      <div>

• 我使用CSS:：before来更改内容。我不想为此编写任何JS
• 我无法更改HTML结构，因为我必须使用特定于应用程序的图标作为复选框的CSS内容

问题

由于我将复选框的id与标签的绑定，因此我无法在ng repeat中使用此复选框指令。我希望得到一个解决办法，因为我被困在这个

---

提前感谢。

拥有一个动态ID，或者在每次有复选框实例时自动递增，或者基于当前的ngRepeat迭代并将其传递到指令中

---

或者，您可以只构造HTML，使标签隐式链接到输入，而无需任何ID。将标签环绕在输入上就可以做到这一点。

有一个动态ID，可以在每次有复选框实例时自动递增，也可以基于当前ngRepeat迭代将其传递到指令中

或者，您可以只构造HTML，使标签隐式链接到输入，而无需任何ID。将标签环绕在输入上就可以做到这一点