angularjs - 多次使用指令时附加唯一 ID

Question

我在 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 附加到 label 和 textarea。所以这对我来说没有太大帮助。

//编辑 1: 我的标签和警告正在使用 angular-translate 扩展进行翻译。这导致每个元素都有不同的 $id，与预期不同。

//编辑 2: 此外，我在每个指令中有多对标签和文本字段。我最终设法通过维护每个指令的 id 并为每对标签和文本字段添加唯一的前缀来解决我的问题。请参阅:https://jsfiddle.net/7pxn5cxu/14/

Answer 1

也许我没有完全理解您的问题，但为什么不能使用 $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>

指令

angular
.module('app', ['pascalprecht.translate'])

.directive('foobarDirective', function() {
  return {
    restrict: 'E',
    scope : {},
    templateUrl: 'foobar.html',
    link: function(scope, element, attrs) {
        console.log('linked' , scope.$id);
      scope.origId = scope.$id;
    }
  }
});

https://jsfiddle.net/7pxn5cxu/14/

---

编辑

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

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

查看

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

指令/服务

angular
  .module('app', [])
  .directive('foobarDirective', foobarDirective)
  .service('UUIDService', UUIDService)

/* directive */
function foobarDirective(UUIDService) {
  var directive = {
    templateUrl: 'foobar.html',
    scope: {
      model: '='
    },
    link: function(scope, element, attrs) {
      scope.id = UUIDService.generateUUID();
    },
    restrict: 'E'
  };
  return directive;    
}

/* UUIDService */
function UUIDService() {
  return {
    generateUUID: generateUUID
  }

  function generateUUID() {
    function s4() {
      return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
      s4() + '-' + s4() + s4() + s4();
  };
}

参见JSFiddle