2014-12-01 6 views
-1

Я просмотрел stackoverflow, а также прочитал this thread, но все равно не успел. Я пытаюсь использовать iCheck в своем веб-приложении AngularJS, но я все еще вижу только регулярные флажки. Я также использую 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" />&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); 
           }); 
          } 
         }); 
        }); 
       } 
      }; 
     }); 
})(); 
+0

ли вы разрешить you'r проблему? –

+0

Я никогда не разрешал свой вопрос, однако я решил использовать свой собственный стиль CSS для флажков и переключателей вместо iCheck. –

ответ

0

Дважды проверьте, что вы загружаете компонент iCheck в главном HTML файле:

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

0

Убедитесь, что в вашем основном угловом модуле вы используете Orting

ui.check 

Как

angular.module("myApp",['ui.check']) 
Смежные вопросы