设置复选框样式的Angular指令

angular directive to style a checkbox

本文关键字：Angular 指令 样式 复选框 设置      更新时间：2023-09-26

我试图用一个角指令样式一个复选框，我想出了一个简单的解决方案。我的想法是在HTML中加入这样的输入

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

，我想创建一个指令，将这个输入包装在一个带有类check的标签中，并在输入后添加一个div，这样我就可以在输入后的div中使用+ from CSS并在其上设计输入的状态。

我的指令应该把我之前的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输出。

下面的指令将把输入元素包装成你想要的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

相关文章：