iCheck 复选框未在 angularjs 中显示答案

【问题标题】：iCheck checkboxes not showing in angularjsiCheck 复选框未在 angularjs 中显示
【发布时间】：2015-11-02 11:03:01
【问题描述】：

我已将 iCheck 样式的复选框集成到我的 angularjs。我在directive.js 中包含以下代码

/**
 * icheck - Directive for custom checkbox icheck
 */
function icheck($timeout) {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function($scope, element, $attrs, ngModel) {
        return $timeout(function() {
            var value;
            value = $attrs['value'];

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

            return $(element).iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-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);
                        });
                    }
                });
        });
    }
};

}

并将状态包含在 config.js 中

.state('user.calendar', {
        url: "/user/profile",
        templateUrl: "views/user/education1.html",
        data: { pageTitle: 'Advanced form' },
        resolve: {
            loadPlugin: function ($ocLazyLoad) {
                return $ocLazyLoad.load([

                    {
                        files: ['css/plugins/iCheck/custom.css','js/plugins/iCheck/icheck.min.js']
                    },
                    {
                        name: 'datePicker',
                        files: ['/css/plugins/datapicker/angular-datapicker.css','js/plugins/datapicker/angular-datepicker.js']
                    },
                    {
                        serie: true,
                        files: ['/js/plugins/moment/moment.min.js', 'js/plugins/daterangepicker/daterangepicker.js', 'css/plugins/daterangepicker/daterangepicker-bs3.css']
                    },
                    {
                        name: 'daterangepicker',
                        files: ['/js/plugins/daterangepicker/angular-daterangepicker.js']
                    }

                ]);
            }
        }
    })

我已经在头文件中添加了 css 和 js 源路径。但我在代码中使用的复选框仍然显示为普通的 html 复选框。

<div class="form-group"><label class="col-sm-8"><h3>What is this?</h3></label>
<br/>
<div class="col-sm-12">
  <div class="col-sm-10 col-sm-offset-1">
    <div><label> <input icheck type="checkbox" ng-model="main.checkk">A </label></div>
    <div><label> <input icheck type="checkbox" ng-model="main.checkl">B </label></div>
    <div><label> <input icheck type="checkbox" ng-model="main.checkm">C </label></div>
    <div><label> <input icheck type="checkbox" ng-model="main.checkn">D</label></div>  
    </div>
</div>
</div>

css 和 js 未应用于复选框。它在我下载的模板中运行良好。可能是什么问题？我哪里做错了？

【问题讨论】：

标签： javascript jquery css angularjs checkbox

【解决方案1】：

我不知道这是否会解决它，但我必须包含与您的 iCheck 主题（在本例中为：icheckbox_square-green）相关的适当 .css 文件，您可以从此处下载：https://github.com/fronteed/icheck/tree/1.x/skins/square。

【讨论】：