Angularjs（ng-click，ng-change）指令不使用icheck插件

Question

我知道这已经被问过了，但是在使用icheck插件时我无法解决问题。

我有一些复选框如下：

<div class="form-group">
<label>
  <input i-check type="checkbox" ng-model="Data.privacy.personal" ng-checked='true' ng-disabled='true' >
  Store & Share Personal Information
</label>
</div>
<div class="form-group">
<label>
  <input data-i-check type="checkbox"  ng-model="Data.privacy.anualreport" ng-checked='true' ng-click="registerprivacy($event)">
  Publish annual report of your job stats
</label>
</div>
<div class="form-group">
    <label><input i-check type="checkbox" ng-model="Data.privacy.share"  ng-change="registerprivacy()" >
        Publish & Share your job postings on Media
    </label>
</div>

我已经创建了一个指令icheck，如下所示：

app.directive('iCheck', function($timeout, $parse) {
    return {
        require: 'ngModel',
        link: function($scope, element, $attrs, ngModel) {
            return $timeout(function() {
                var value = $attrs['value'];
                $scope.$watch($attrs['ngModel'], function(newValue){
                    $(element).iCheck('updated');
                })

                $scope.$watch($attrs['ngDisabled'], function(newValue) {
                    $(element).iCheck(newValue ? 'disable':'enable');
                    $(element).iCheck('updated');
                })

                return $(element).iCheck({
                    checkboxClass: 'icheckbox_flat-green',
                    radioClass: 'icheckbox_flat-green'
                });
            },300);
        }
    };
});

最后我的控制器中的registerprivacy函数如下：

$scope.registerprivacy = function(){
          alert("test");
          //alert(value);
    };

问题在于ng-click和ng-change没有触发，但如果我对icheck指令发表评论ng-click和ng-change有效完美。

如果没有使用icheck指令，那么如果我使用icheck的jquery方法，则不会呈现复选框，仅用于信息：

$(blabla).iCheck({
      checkboxClass: 'icheckbox_flat-green'
    });

呈现复选框，但未触发ng-click和ng-change。

如何使用icheck和ng-click和ng-change指令使复选框成为rendred？

Answer 1

使用icheck时使用ng-change而不是ng-click。

Answer 2

通过在icheck.js文件的末尾添加以下代码块并在app.js中创建指令来解决问题

icheck.js的结尾：

$(function () {
    $('input').iCheck();
    $('input.all').on('ifChecked ifUnchecked', function(event) {
        if (event.type == 'ifChecked') {
            $('input.check').iCheck('check');
        } else {
            $('input.check').iCheck('uncheck');
        }
    });
    $('input.check').on('ifUnchecked', function(event) {
        $('input.all').iCheck('uncheck');
    });
});

app.js中的App指令：

app.directive('icheck', ['$timeout', function($timeout){
    return {
      require: 'ngModel',
      link: function($scope, element, $attrs, ngModel) {
        return $timeout(function() {
          var value = $attrs['value'];

          $scope.$watch($attrs['ngModel'], function(newValue){
            $(element).iCheck('update');
          })

          return $(element).iCheck({
            checkboxClass: 'icheckbox_flat-green',
          }).on('ifChanged', function(event) {
            if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) {
              $scope.$apply(function() {
                return ngModel.$setViewValue(event.target.checked);
              });
            }
            if ($(element).attr('type') === 'radio' && $attrs['ngModel']) {
              return $scope.$apply(function() {
                return ngModel.$setViewValue(value);
              });
            }
          });
        });
      }
    };
  }]);