为可变数量的指令生成唯一的 id 和类

Question

Here's a jsbin 说明了这个问题，但我将在下面用代码解释它。我正在 AngularJs 中创建一个自定义指令，它将为数据库中的每个条目插入一次，我使用 ng-repeat 对其进行迭代，如您在此处看到的。

 <div ng-controller="DemoCtrl as demo">

    <h1> Hello {{ name }}

<div class="some-list" ng-repeat="customer in customers">

 <div id="not-unique"  class="not-unique" my-dumb-graphic datajson=customer></div>
I need to make a unique class or id

  </div>

</div>

如果您没有注意到，隐藏在该代码中的指令是 my-dumb-graph，下面的代码中有相应的 myDumbGraphic 名称。为了插入图形，我将在下面指令的链接函数中执行此操作，我需要能够在上面的 html 中选择一个唯一的 id 或类，并且我需要能够选择它从指令中的链接函数中，所以不知何故需要从js中的html引用id。您可以在 jsbin 中看到，在指令的链接函数中，id 还不是唯一的（即尚未计算动态部分），即使它在渲染到 dom 时最终是唯一的。

<div id="not-unique"  class="not-unique" my-dumb-graphic datajson=customer></div>

其余代码 var app = angular.module('jsbin', ['ngRoute']) .config(函数 ($routeProvider) { '使用严格';

        var routeConfig = {
            controller: 'DemoCtrll'

        };
        $routeProvider
            .when('/', routeConfig)
            .otherwise({
                redirectTo: '/'
            });
});

app.controller('DemoCtrl', function($scope, $routeParams) { 
   $scope.name = "World";
   $scope.customers = [
        {
            name: 'David',
            street: '1234 Anywhere St.'
        },
        {
            name: 'Tina',
            street: '1800 Crest St.'
        },
        {
            name: 'Michelle',
            street: '890 Main St.'
        }
    ];

});
app.directive('myDumbGraphic', function () {

    return {
            restrict: 'A', 
            scope: {
                datajson: '='
            },


             link: function (scope, elem, attrs) {

                ...code to insert my dumb graphic...need to select unique id or class or both...need to select unique id from here

            }
        };

    });

更新

正如一些人所建议的，有多种方法可以为 div 创建动态 id，但是，当我在链接函数中需要它时，不会计算 div id 的动态部分。例如，如果根据其他答案的建议，我将 html 中的 id 设置为这个 <div id="id_{{::id}}"，那么它的动态部分不会在我需要它到链接函数内部时计算出来，尽管如果我检查dom 渲染后计算。在链接功能中，我可以通过像这样的elem访问div "#"+elem[0].id;并且日志语句显示当时它还没有计算——这就是日志语句为 "#"+elem[0].id 显示的内容； ----> #id_{{::id}}

Answer 1

1. 指令链接函数有相应的元素作为参数传入，所以你已经有了选择器：

   链接：函数（范围、元素、属性）{

   }

2. 或者，您可以利用 $scope.customers 数组键作为唯一 id 并设置视图元素，将 id 传递到指令中，并将其用作选择器（假设您已加载 jQuery）：

   <h1> Hello {{ name }} </h1>
   
   <!-- use customers array index -->
   <div class="some-list" ng-repeat="(customerId, customer) in customers">
   
     <!-- append customer id to this element id so it is unique -->
     <div id="directive-element-selector-{{customerId}}"  class="not-unique" my-dumb-graphic datajson=customer customer-array-id=customerId></div>
       <div id="inner-selector-{{customerId}">
         I need to make a unique class or id
       </div>
     </div>
   </div>
   

指令：

app.directive('myDumbGraphic', function () {
  return {
    restrict: 'A', 
    scope: {
      datajson: '=',
      customerArrayId: '='
    },

   link: function (scope, elem, attrs) {

      $('#directive-element-selector-' + customerArrayId) // jQuery selector, this should equal elem pass in as link function param

      $('#inner-selector-' + customerArrayId) // inner selector

    }
  };
});