iCheck with AngularJS and RequireJS -
i've looked around stackoverflow read this thread still no success. trying use icheck in angularjs web app still seeing regular checkboxes. using require.js. ideas how work?
thanks!
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>
directive (from https://github.com/ciel/icheck):
(function () { /** * create new module icheck can injected 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); }); } }); }); } }; }); })();
double check you're loading icheck component in main html file:
<script src="bower_components/icheck/icheck.min.js"></script>
Comments
Post a Comment