Unique directive template identifiers for elements

Question

I have a directive that can be used several times on a page. In the template of this directive, I need to use identifiers for the input element, so that I can "bind" the shortcut to it like this:

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

Now the problem is that as soon as my directive is included several times, the identifier "item1" is no longer unique, and the label does not work correctly (it should check / uncheck the box when clicked).

How is this problem fixed? Is there a way to assign a "namespace" or "prefix" to the template (for example, asp.net with the ctl00 prefix ...-)? Or I need to include angular -Expression in each id attribute, which consists of a directive identifier from Scope + static identifier. Something like:

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

Edit:

My directive

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

My html

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

Answer 1

HTML

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

Answer 2

UPDATE

Angular 1.3 introduced a native lazy one-time binding. from the Angular documentation:

One-time binding

An expression starting with :: is considered a one-time expression. Disposable expressions will stop recalculation once they are stable, which occurs after the first digestion, if the result of the expression is a value that is not undefined (see the stabilization of the algorithm below).

Native solution :

 .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++; } } }) 

---

Singly connected only:

• If you need to bind a value only after you should not use the bind ({{}} / ng-bind)
• road bindings because they use $ watch. In your example, with every $ digest, angular dirty checks your identifiers for changes, but you set them only once.
• Check out this module: https://github.com/Pasvaz/bindonce

Decision:

 .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); } } }) 

Answer 3

We add the BlockId parameter to the scope because we use the identifier in our Selenium tests, for example. They still have a chance that they are not unique, but we prefer to have full control over them. Another advantage is that we can give the element a more descriptive identifier.

JS Directive

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

HTML directive

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

Using

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

Answer 4

Besides the Ilan and BuriB solutions (which are more general, which is good), I found a solution to my specific problem, because I need identifiers for the attribute for the label. Instead, you can use the following code:

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

The following Stackoverflow-Post helped:

stack overflow