iCheck 与 AngularJS 和 RequireJS答案

【问题标题】：iCheck with AngularJS and RequireJSiCheck 与 AngularJS 和 RequireJS
【发布时间】：2014-12-01 21:59:57
【问题描述】：

我查看了 stackoverflow 并阅读了 this thread，但仍然没有成功。我正在尝试在我的 AngularJS 网络应用程序中使用 iCheck，但我仍然只看到常规复选框。我也在使用require.js。任何想法如何让它发挥作用？

谢谢！

HTML：

<label ng-disabled="true" style="font-weight:normal">
                        <input icheck type="checkbox" ng-model="permissions[0]"
                               ng-disabled="true" ng-checked="user.isAdmin" />&emsp;Option #1<br />
                    </label>
                    <label ng-disabled="true" style="font-weight:normal">
                        <input icheck type="checkbox" ng-model="permissions[1]"
                               ng-disabled="true" ng-checked="user.isAdmin" />&emsp;Option #2<br />
                    </label>
                    <label ng-disabled="true" style="font-weight:normal">
                        <input icheck type="checkbox" ng-model="permissions[2]"
                               ng-disabled="true" ng-checked="user.isAdmin" />&emsp;Option #3<br />
                    </label>
                    <label ng-disabled="true" style="font-weight:normal">
                        <input icheck type="checkbox" ng-model="permissions[3]"
                               ng-disabled="true" ng-checked="user.isAdmin" />&emsp;Option #4<br />
                    </label>
                    <label ng-disabled="true" style="font-weight:normal">
                        <input icheck type="checkbox" ng-model="permissions[4]"
                               ng-disabled="true" ng-checked="user.isAdmin" />&emsp;Option #5<br />
                    </label>

指令（来自https://github.com/ciel/icheck）：

    (function () {
    /**
     * Create a new module for icheck so that it can be injected into an existing
     * angular program easily.
     */
    angular.module('ui.check', [])
      .directive('icheck', function ($timeout, $parse) {
          return {
              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_flat-blue',
                          radioClass: 'iradio_flat-blue'

                      }).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);
                              });
                          }
                      });
                  });
              }
          };
      });
})();

【问题讨论】：

你的问题解决了吗？
我从未解决过我的问题，但是我选择使用自己的 CSS 样式来制作复选框和单选按钮，而不是 iCheck。

标签： angularjs requirejs icheck

【解决方案1】：

仔细检查您是否在主 html 文件中加载 iCheck 组件：

<script src="bower_components/iCheck/icheck.min.js"></script>

【讨论】：

【解决方案2】：

检查您正在导入的主 Angular 模块中的情况

ui.check

喜欢

angular.module("myApp",['ui.check'])

【讨论】：