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或类，我需要能够选择它从指令中的link函数内部，所以不知何故需要从js中的html引用id。你可以在jsbin中看到指令的link函数内部，id还不是唯一的（即动态部分尚未计算），即使它在渲染到dom时它最终是唯一的。

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

其余代码 var app = angular.module（'jsbin'，['ngRoute']） .config（function（$ routeProvider）{ 'use strict';

        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。在链接函数中，我可以通过元素访问div，如“＃”+ elem [0] .id;和日志语句显示当时它没有计算 - 这是日志语句显示为“＃”+ elem [0] .id; ----＆GT; #id _ {{:: id}}

Answer 1

指令链接函数将相应的元素作为参数传入，因此您已经拥有了选择器：

link：function（scope，element，attrs）{

}

或者，您可以利用您的$ 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

    }
  };
});

Answer 2

您可以使用$ scope $ id属性，该属性对于系统中的每个指令和范围都是唯一的，因此您可以执行类似

的操作

<div class="myclass_{{::$id}}"></div>

或类似的东西

注意： ::是一次性绑定

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

2 个答案: