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

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

该指令如下

angular.module('journal.directives', []).
  directive('fancyCheckbox', function(){
  return {
    restrict : 'EA', 
    replace : true,
    template : '
' +
           '' +
           '' +
           '
',
    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);
    }
  };
});

当我把我的指令称为

它变成了

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

希望有人能提供帮助

谢谢