javascript - 为内部 html 创建具有 id 属性但 id 仍在外部 html 上的 angularjs 指令

Question

所以我创建了这个由标签和输入元素组成的复选框指令。我想在指令上设置一个 id 属性，并将其设置为输入元素的“id”和标签“for”属性。这工作正常，但问题是它保留在作为 div 的外部 html 上，所以它打破了我的指令。我认为如果您将指令设置为 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 directive guide :

The replacement process migrates all of the attributes / classes from the old element to the new one.

因此，您所看到的是预期的行为。

我不会删除链接中的属性，而是创建一个新属性，例如 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>',

demo fiddle