使用内部html的id属性创建angularjs指令,但仍然在外部html上使用id

Question

所以我创建了这个复选框指令,它由一个标签和输入元素组成.我想在指令上设置一个id属性,并将其设置为input元素的"id"和标签"for"属性.这工作正常,但问题是它仍然在外部html上,这是一个div,所以它打破了我的指令.我认为如果您将指令设置为replace:true,那么这将删除定义该指令的html.

该指令如下

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

当我把我的指令称为

<fancy-checkbox colour="red" id="mycheckbox"></fancy-checkbox>

它变成了

<div class="fancyCheckbox ng-isolate-scope greenspot" colour="green" id="mycheckbox">
  <input type="checkbox" id="mycheckbox">
  <label for="mycheckbox"></label>
</div>

你看到"id"仍在外部div上,这不是我想要的.我以为这会被删除.所以我只需要在链接功能中手动删除它

希望有人能提供帮助

谢谢

Answer 1

来自Angular指令指南:

替换过程将所有属性/类从旧元素迁移到新元素.

所以,你所看到的是预期的行为.

而不是删除链接中的属性我只是创建一个新属性,例如check-id并像这样使用它:

<fancy-checkbox colour="red" check-id="mycheckbox"></fancy-checkbox>

将其添加到您的范围:

checkId : '@', 

并在您的模板中使用它:

template : '<div class="fancyCheckbox">' +
       '<input type="checkbox" id="{{ checkId }}" />' +
       '<label for="{{ checkId }}" ></label>' +
       '</div>',

演示小提琴