指令模板元素的唯一ID [英] Directive Template Unique IDs for Elements

问题描述

我有可以在页面上多次使用一个指令。在这个指令的模板，我需要使用的ID为输入元素这样我就可以绑定标签以它像这样：

 ＆LT;输入类型=复选框ID =ITEM1/＆GT;＆LT;标签=ITEM1＆GT;开放＆LT; /标签＆gt;
 

现在的问题是，一旦我的指令，包含多次，ID为ITEM1已不再独特和标签不能正常工作（应该/不选中复选框，单击时）。

这是如何的问题解决吗？是否有分配为模板的命名空间或preFIX（如asp.net与ctl00 ...- preFIX一样）的方式？还是我，包括在每个ID属性其中包括从范围+静态ID指令-ID的角度-Ex的pression。是这样的：

 ＆LT;输入类型=复选框ID ={{directiveID}} +'ITEM1'/＆GT;＆LT;标签={{directiveID}} +'ITEM1 '＆GT;开放＆LT; /标签＆gt;
 

编辑：

我的指令

  module.directive（'myDirective'，函数（）{
    返回{
        限制：'E'，
        适用范围：真，
        templateUrl：'谐音/ _myDirective.html'，
        控制器：['$范围，$元素，$ ATTRS'，函数（$范围，$元，$ ATTRS）{
            ...
        } //控制器
    };
}]）;
 

我的HTML

 ＆LT; D​​IV CLASS =myDirective＆GT;
  ＆LT;输入类型=复选框ID =ITEM1/＆GT;＆LT;标签=ITEM1＆GT;开放＆LT; /标签＆gt;
＆LT; / DIV＆GT;
 

解决方案

更新

角1.3引入了原生懒一次性绑定。从角前pression文档：

  

一次性结合

  
  

这与::开头的前pression被认为是一个
  一次性EX pression。一次性EX pressions将停止重新计算一次
  它们是稳定的，这之后的第一个摘要，如果发生
  前pression结果是一个非未定义的值（见值稳定
  下面算法）。

本机的解决方案

  .directive（'myDirective'，函数（）{    VAR UNIQUEID = 1;
    返回{
        限制：'E'，
        适用范围：真，
        模板：'＆LT;输入类型=复选框ID ={{:: UNIQUEID}}/＆GT;' +
                  '＆LT;标签={{:: UNIQUEID}}＆GT;开放＆LT; /标签＆gt;，
        链接：功能（范围，ELEM，ATTRS）{
            scope.uniqueId ='项目'+ UNIQUEID ++;
        }
    }
}）
 

---

只能绑定一次：

• 如果您只需要绑定一个值，一旦你不应该使用绑定（{{}} / NG绑定）


• ，因为它们使用$表绑定是昂贵的。在你的榜样，在每$消化，棱角分明的脏检查您的ID更改，但你只能设置一次即可。


• 检查该模块： https://github.com/Pasvaz/bindonce

解决方案：

.directive（'myDirective'，函数（）{    VAR UNIQUEID = 1;
    返回{
        限制：'E'，
        适用范围：真，
        模板：'＆LT;输入类型=复选框/＆GT;＆LT;标签＆gt;＆开放LT; /标签＆gt;，
        链接：功能（范围，ELEM，ATTRS）{
            VAR项目='项目'+ UNIQUEID ++;
            elem.find（'输入'）ATTR（'身份证'，项目）。
            。elem.find（标签）ATTR（'为'，项目）;
        }
    }
}）


I have a directive that can be used multiple times on a page. In the template of this directive, I need to use IDs for an input-Element so I can "bind" a Label to it like so:

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

Now the problem is, as soon as my directive is included multiple times, the ID "item1" is not unique anymore and the label doesn't work correctly (it should check/uncheck the checkbox when clicked).

How is this problem fixed? Is there a way to assign a "namespace" or "prefix" for the template (like asp.net does with the ctl00...-Prefix)? Or do I have to include an angular-Expression in each id-Attribute which consists of the directive-ID from the Scope + a static ID. 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>

解决方案

UPDATE

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

One-time binding

An expression that starts with :: is considered a one-time expression. One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value (see value stabilization 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++;
        }
    }
})

---

Only bind once:

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

Solution:

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

这篇关于指令模板元素的唯一ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！