使用angularjs指令icheck插件

Question

我的Angularjs應用程序出現問題，找不出問題出在哪裏。

檢查它plunker Here

，當我點擊它應該運行I檢查（）插件按鈕，但它並不

Answer 1

你應該做一兩件事來使一切工作：力AngularJS實際上使用jQuery。

AngularJS在其源代碼中包含jQlite，但它與jQuery不一樣。如果您在之前包含jQuery angular.js，那麼Angular將使用它來代替自己的實現。

因此只需要改變這個index.html中：

<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script> 

（jQuery是angular.js之前）

working Plunker

Answer 2

更好的I檢查指令可以在這裏找到：https://github.com/fronteed/iCheck/issues/62（wajatimur）

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-aero', 
       radioClass: 'iradio_flat-aero' 

      }).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); 
        }); 
       } 
      }); 
     }); 
    } 
};