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

时间:2015-04-08 10:16:42

标签: css angularjs angularjs-directive

大家好,请帮帮我......

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

我完成了创建框,我想在点击选中时创建复选标记。

HTML Code ::::

 <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;
}

我选中复选框时需要勾选标记。

请帮助我

1 个答案:

答案 0 :(得分:1)

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