AngularJS中元素的指令模板唯一ID

我有一个指令，可以在一个页面上多次使用。在此指令的模板中，我需要对输入元素使用ID，以便可以将Label“绑定”到它，如下所示：

<input type="checkbox" id="item1" /><label for="item1">open</label>

现在的问题是，一旦多次包含我的指令，ID“ item1”就不再是唯一的，并且标签将无法正常工作（单击时应选中/取消选中该复选框）。

该问题如何解决？有没有一种方法可以为模板分配“名称空间”或“前缀”（例如asp.net使用ctl00 ...- Prefix）？还是我必须在每个id属性中包括一个angular-Expression，它由作用域中的指令ID +一个静态ID组成。就像是：

<input type="checkbox" id="{{directiveID}} + 'item1'" /><label for="{{directiveID}} + 'item1'">open</label>

编辑：

我的指令

module.directive('myDirective', function () {
    return {
        restrict: 'E',
        scope: true, 
        templateUrl: 'partials/_myDirective.html',
        controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
            ...
        } //controller
    };
}]);

我的HTML

<div class="myDirective">
  <input type="checkbox" id="item1" /><label for="item1">open</label>
</div>

的HTML

    <div class="myDirective">
        <input type="checkbox" id="myItem_{{$id}}" />
        <label for="myItem_{{$id}}">open myItem_{{$id}}</label>
    </div>

更新

Angular 1.3引入了本机懒惰一次性绑定。从角度表达式文档中：

一次性绑定

以::开头的表达式被视为一次性表达式。一次性表达式一旦稳定就将停止重新计算，如果表达式结果为非不确定值，则在第一次摘要后会发生（请参见下面的值稳定算法）。

本机解决方案：

.directive('myDirective', function() {

    var uniqueId = 1;
    return {
        restrict: 'E',
        scope: true,
        template: '<input type="checkbox" id="{{::uniqueId}}"/>' +
                  '<label for="{{::uniqueId}}">open</label>',
        link: function(scope, elem, attrs) {
            scope.uniqueId = 'item' + uniqueId++;
        }
    }
})

仅绑定一次：

• 如果您只需要绑定一个值，就不应该使用绑定（{{}} / ng-bind）
• 绑定很昂贵，因为它们使用$ watch。在您的示例中，在每个$ digest上，角度脏都会检查ID的更改，但您只需设置一次即可。
• 检查此模块：https : //github.com/Pasvaz/bindonce

解：

.directive('myDirective', function() {

    var uniqueId = 1;
    return {
        restrict: 'E',
        scope: true,
        template: '<input type="checkbox"/><label>open</label>',
        link: function(scope, elem, attrs) {
            var item = 'item' + uniqueId++;
            elem.find('input').attr('id' , item);
            elem.find('label').attr('for', item);
        }
    }
})

我们将一个BlockId参数添加到范围，因为例如在Selenium测试中使用了id。它们仍然有可能不是唯一的，但是我们更希望完全控制它们。另一个优点是我们可以为商品提供更具描述性的ID。

指令JS

module.directive('myDirective', function () {
    return {
        restrict: 'E',
        scope: {
            blockId: '@'
        }, 
        templateUrl: 'partials/_myDirective.html',
        controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
            ...
        } //controller
    };
}]);

指令HTML

<div class="myDirective">
  <input type="checkbox" id="{{::blockId}}_item1" /><label for="{{::blockId}}_item1">open</label>
</div>

用法

<my-directive block-id="descriptiveName"></my-directive>

除了Ilan和BuriB的解决方案（通用性更好）之外，我还找到了针对特定问题的解决方案，因为我需要标签“ for”属性的ID。而是可以使用以下代码：

<label><input type="checkbox"/>open</label>

以下Stackoverflow-Post已提供帮助：

https://stackoverflow.com/a/14729165/1288552