javascript - 用于设置复选框样式的 Angular Directive(指令)

Question

我正在尝试使用 Angular Directive(指令)设置复选框的样式，并提出了一个简单的解决方案。我的想法是在 HTML 中有一个像这样的输入

<input type="checkbox" class="checkbox" ng-model="abc1"/>

我想创建一个指令，实际上将这个输入包装在带有类检查的标签内，并在输入后添加一个div，这样我就可以在输入后使用CSS中的+来定位该div，并在其上设计输入。

所以我的指令应该将我的 HTML 从我之前应该转换成这个

<label class="check">
    <input type="checkbox" class="checkbox" ng-model="abc1"/>
    <div></div>
</label>

现在我创建了这个指令

.directive('checkbox', function() {
    return {
        restrict: 'C',
        transclude: true,
        template: '<label><ng-transclude></ng-transclude><div></div></label>',
        link: function(scope, elem, attrs) {
        }
    };
})

但它没有实现我想要实现的布局，我希望有人可以帮助我展示编写指令的方法，以便将其转换为 HTML 输出。

Answer 1

以下指令将包装输入元素以实现您想要的 HTML 结构。如果包装器 div 是严格结构性的并且不包含任何指令，那么我认为这样做是可以的。

  app.directive('checkbox', function() {
      return {
          restrict: 'C',
          link: function (scope, elem, attrs) {
              elem.wrap('<div class="check"></div>');
              elem.after('<div></div>');
          }
      };
  });

这是一个Plunk