iCheck флажков не показывая в angularjs

Question

У меня есть iCheck стилизованных флажков интегрированы в мой angularjs.I've включил следующий код в 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 не применяются к этому флажку. Он отлично работал в шаблоне, который я загрузил. Что может быть проблемой? Где я неправ?

Answer 1

Я не знаю, будет ли это исправлено, но я должен включить соответствующий файл .css, который идет с вашей темой iCheck (в данном случае: icheckbox_square-green), которую вы можете скачать здесь: https://github.com/fronteed/icheck/tree/1.x/skins/square.