javascript 为内部html创建带有id属性的angularjs指令，但id仍在外部html上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20923651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating angularjs directive with id attribute for internal html but id still on outer html
提问by kiznore
So I have created this checkbox directive that is made up of a label and input element. I want to set an id attribute on the directive and set this as the "id" of the input element and the label "for" attribute. This works fine, but the problem is that it remains on the outer html which is a div, so it breaks my directive. I thought that if you had the directive set to replace : true, then this would remove the html that defined the directive .
所以我创建了这个由标签和输入元素组成的复选框指令。我想在指令上设置一个 id 属性，并将其设置为输入元素的“id”和标签“for”属性。这工作正常，但问题是它保留在作为 div 的外部 html 上，因此它破坏了我的指令。我认为如果您将指令设置为替换：true，那么这将删除定义指令的 html。
The directive is as follows
指令如下
angular.module('journal.directives', []).
directive('fancyCheckbox', function(){
return {
restrict : 'EA',
replace : true,
template : '<div class="fancyCheckbox">' +
'<input type="checkbox" id="{{ id }}" />' +
'<label for="{{ id }}" ></label>' +
'</div>',
scope : {
colour : '@',
id : '@',
},
link : function(scope, elem, attrs){
var spotColourClass;
var valid_colours = ['blue', 'green', 'gray', 'purple',
'blue', 'orange', 'charcoal', 'light',
'yellow', 'red'];
if(valid_colours.indexOf(scope.colour) !== -1){
spotColourClass = scope.colour + "spot";
}else{
spotColourClass = 'greenspot';
}
elem.addClass(spotColourClass);
}
};
});
When I call my directive as
当我将我的指令称为
<fancy-checkbox colour="red" id="mycheckbox"></fancy-checkbox>
and it becomes
它变成
<div class="fancyCheckbox ng-isolate-scope greenspot" colour="green" id="mycheckbox">
<input type="checkbox" id="mycheckbox">
<label for="mycheckbox"></label>
</div>
You see that the "id" is still on the outer div, which is not what I want. I assumed that this would be removed. So do I just have to remove it manually in the linking function
你看到“id”还在外面的div上，这不是我想要的。我认为这将被删除。那么我是否只需要在链接功能中手动删除它
Hope someone can help
希望有人能帮忙
Thanks
谢谢
回答by KayakDave
From the Angular directive guide:
The replacement process migrates all of the attributes / classes from the old element to the new one.
替换过程将所有属性/类从旧元素迁移到新元素。
So, what you're seeing is expected behavior.
所以，你看到的是预期的行为。
Rather than remove the attribute in link I'd just create a new attribute, for instance check-idand use it like this:
例如check-id，我不会删除链接中的属性，而是创建一个新属性，然后像这样使用它：
<fancy-checkbox colour="red" check-id="mycheckbox"></fancy-checkbox>
add it to your scope:
将其添加到您的范围：
checkId : '@',
and use that within your template:
并在您的模板中使用它：
template : '<div class="fancyCheckbox">' +
'<input type="checkbox" id="{{ checkId }}" />' +
'<label for="{{ checkId }}" ></label>' +
'</div>',
