iCheck与AngularJS和RequireJS
问题描述:
我看了看周围的计算器以及阅读this thread但仍然没有成功。我正在尝试在我的AngularJS网络应用程序中使用iCheck,但我仍然只看到常规复选框。我也使用require.js。任何想法如何让这个工作?iCheck与AngularJS和RequireJS
谢谢!
HTML:
<label ng-disabled="true" style="font-weight:normal">
<input icheck type="checkbox" ng-model="permissions[0]"
ng-disabled="true" ng-checked="user.isAdmin" /> 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" /> 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" /> 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" /> 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" /> 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);
});
}
});
});
}
};
});
})();
答
仔细检查你正在装载I检查部件在您的主HTML文件:
<script src="bower_components/iCheck/icheck.min.js"></script>
答
检查你的主角模块中是否有imp奥廷
ui.check
像
angular.module("myApp",['ui.check'])
你解决找你的问题? – 2014-12-08 22:08:09
我从来没有解决我的问题,但我选择使用我自己的CSS样式复选框和单选按钮,而不是iCheck。 – 2015-04-03 16:54:04