Angularjs 多次使用指令时追加唯一id

我在Angular应用程序中定义了一个自定义指令：

app.directive('foobarDirective', function() {
  return {
    restrict: 'E',
    templateUrl: 'foobar.html'
  };
});

此指令在一个页面内多次用于创建表单元素。但是，一次只能看到其中一个实例

现在的问题是，我的表单中有引用输入字段的标签。由于指令被多次使用，id不再是唯一的，标签的

for

-机制失败

<div class="row">
  <div class="col-md-12">
    <label for="foobar" translate="foobar"></label>

    <span class="label label-danger" ng-show="model.foobar.length > 255" translate="warn_too_long"></span>

    <textarea id="foobar" auto-height
      type="text" class="form-control"
      ng-model="model.foobar"></textarea>
  </div>
</div>

我能做些什么吗？在另一篇文章中，我读到我可以使用

id=“foobar{{{$id}}”

来附加一个唯一的id，但是在我的例子中，

标签和
文本区域
附加了不同的id。所以这对我没什么帮助

//编辑1:我的标签和警告正在使用角度平移扩展名进行平移。这导致每个元素都有不同的
$id
，而不是预期的

//编辑2:此外，我在每个指令中都有多对标签和文本字段。我最终设法解决了我的问题，维护了一个per指令id，并为每对label和textfield预先设置了一个唯一的前缀。请参阅：
也许我没有完全理解您的问题，但是为什么不能使用
$id
作为唯一标识符


最终工作方案

查看

<!-- application container -->
<div ng-app="app">

  <!-- directive view template -->
  <script type="text/ng-template" id="foobar.html">
    <p>origId: {{origId}}</p>
    <div class="row">
      <div class="col-md-12">
        <label for="foobar_{{origId}}" class="foobar_{{origId}}" translate="foobar"></label>
        <br />
        <span class="label label-danger foobar_{{origId}}" translate="foobarWarning"></span>
        <br />
        <textarea id="foobar_{{origId}}" auto-height type="text" class="form-control" ng-model="scope.model.foobar" placeholder="id: foobar_{{origId}}"></textarea>
      </div>

      <div class="col-md-12">
        <label for="bar_{{origId}}" class="bar_{{origId}}" translate="bar"></label>
        <br />
        <span class="label label-danger bar_{{origId}}" translate="barWarning"></span>
        <br />
        <textarea id="bar_{{origId}}" auto-height type="text" class="form-control" ng-model="scope.model.bar" placeholder="id: bar_{{origId}}"></textarea>
        <br />
        <strong>Model:</strong> {{scope.model}}
      </div>
    </div>
  </script>

  <foobar-directive></foobar-directive>
  <br/>
  <foobar-directive></foobar-directive>

</div>

<!-- application container -->
<div ng-app="app">

  <!-- directive view template -->
  <script type="text/ng-template" id="foobar.html">
    <div class="row">
      <div class="col-md-12">
        <label for="foobar_{{::id}}">label for foobar_{{::id}}</label>
        <span class="label label-danger"></span>
        <br/>
        <textarea id="foobar_{{::id}}" auto-height type="text" class="form-control" ng-model="model.foobar" placeholder="id : foobar_{{::id}}"></textarea>
        <br/>
        <strong>Model:</strong> {{model}}

      </div>
    </div>
  </script>

  <foobar-directive></foobar-directive>
  <br/>
  <foobar-directive></foobar-directive>

</div>



编辑

使用指令链接功能将使用
$id
用法更新为预先生成的唯一id。这一代UUID是可重用服务
UUIDService
中的包装器

之前使用AngularJS
$id
方法的答案仍然可以找到

查看

<!-- application container -->
<div ng-app="app">

  <!-- directive view template -->
  <script type="text/ng-template" id="foobar.html">
    <p>origId: {{origId}}</p>
    <div class="row">
      <div class="col-md-12">
        <label for="foobar_{{origId}}" class="foobar_{{origId}}" translate="foobar"></label>
        <br />
        <span class="label label-danger foobar_{{origId}}" translate="foobarWarning"></span>
        <br />
        <textarea id="foobar_{{origId}}" auto-height type="text" class="form-control" ng-model="scope.model.foobar" placeholder="id: foobar_{{origId}}"></textarea>
      </div>

      <div class="col-md-12">
        <label for="bar_{{origId}}" class="bar_{{origId}}" translate="bar"></label>
        <br />
        <span class="label label-danger bar_{{origId}}" translate="barWarning"></span>
        <br />
        <textarea id="bar_{{origId}}" auto-height type="text" class="form-control" ng-model="scope.model.bar" placeholder="id: bar_{{origId}}"></textarea>
        <br />
        <strong>Model:</strong> {{scope.model}}
      </div>
    </div>
  </script>

  <foobar-directive></foobar-directive>
  <br/>
  <foobar-directive></foobar-directive>

</div>

<!-- application container -->
<div ng-app="app">

  <!-- directive view template -->
  <script type="text/ng-template" id="foobar.html">
    <div class="row">
      <div class="col-md-12">
        <label for="foobar_{{::id}}">label for foobar_{{::id}}</label>
        <span class="label label-danger"></span>
        <br/>
        <textarea id="foobar_{{::id}}" auto-height type="text" class="form-control" ng-model="model.foobar" placeholder="id : foobar_{{::id}}"></textarea>
        <br/>
        <strong>Model:</strong> {{model}}

      </div>
    </div>
  </script>

  <foobar-directive></foobar-directive>
  <br/>
  <foobar-directive></foobar-directive>

</div>

请参见
您可以使用rootscope记住上次使用的指令的id，然后递增它。下面是一个工作示例（运行示例并检查源代码，所有文本都有不同的id）


var-app=angular.module（“app”，[]）；
应用程序
.controller（'controller'，函数（$scope，$rootScope）{
$rootScope.directiveID=0；
})
.directive（“testDirective”，函数（$rootScope）{
返回{
控制器：函数（$scope，$rootScope）{
if（$rootScope.directiveID==未定义）{
$rootScope.directiveID=0；
}否则{
$rootScope.directiveID=$rootScope.directiveID+1；
}
},
模板：“所有文件都有不同的div（签入源文件）”，
链接：功能（范围、要素、属性）{
scope.directiveID=angular.copy（$rootScope.directiveID）；
元素属性（“id”，“dir_uux”+scope.directiveid）；
}
};
});

在我的应用程序中，我得到了不同的ID。例如，
\u 170
被附加到标签的id上，而
\u 3
被附加到文本字段的id上。因此在我的代码中，每个DOM节点都有一个单独的id。我使用的是Angular 1.4.7，这种行为在其他版本中是否有所不同，可能？@user1438038-它不应该改变-如我的示例所示。无论如何，我已经更新了使用唯一UUID（通过服务）的方法。这样，您将确保在所有团队中都使用唯一的指令id，而不是依赖AngularJs
$id
。这有帮助吗？我想弄清楚为什么
$id
方法不起作用，并尽可能少地更改代码，因为我有大量需要更改的可重用指令。您需要通过向指令构造函数添加
范围：{}，
来隔离指令范围。否则，它将被添加到当前调用的范围对象中，并共享范围acros controller&directions。请参阅示例。我需要标签和文本区域上的单个ID，而不是包装指令上的ID。见我的问题。