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" />&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> 

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

Popular posts from this blog

ruby on rails - RuntimeError: Circular dependency detected while autoloading constant - ActiveAdmin.register Role -

c++ - OpenMP unpredictable overhead -

javascript - Wordpress slider, not displayed 100% width -