在 Angular js 中为自定义复选框创建自定义指令

Question

嗨任何人请帮助我...

我想在 Angular js 中为自定义复选框创建自定义指令，

我已经完成创建框，我想在我们点击选中时创建复选标记。

HTML代码:::

 <my-checkbox ng-transclude class="customCheeckBox" style="margin:5px;"></my-checkbox>

自定义指令代码：

App.directive('myCheckbox', function(){
  return {
      restrict: 'E',
      replace: true,
      transclude:true,
      template: '<div class="checkbox" ng-class="{checked: isChecked}" ng-click="toggleMe()"></div>',
      scope: {
        isChecked: '=?'
      },
      link: function (scope, elem, attrs) {
        scope.isChecked = true;

        scope.toggleMe = function () {
          scope.isChecked = !(scope.isChecked);  
          console.log('clicked');
        }
      }
  }});

CSS代码：

.checked {
  background-color:red;
}
.customCheeckBox{
    border: 1px solid black;
  height: 15px;
  width: 15px;
}

我想要选中复选框时的复选标记。

任何人都可以帮助我

Answer 1

您忘记了：require: "ngModel" https://jsfiddle.net/az3rq4na/。您的复选框应包含任何模型以显示其状态。在官方网站上阅读有关 ngModelController 的更多信息。

在 Angular js 中为自定义复选框创建自定义指令

Create Custom Directive for Custom Check box in Angular js

css

angularjs

angularjs-directive