en utilisant la directive angularjs pour icheck plugin - angularjs, angularjs-directive, icheck

J'ai un problème avec mon application Angularjs, je ne peux pas savoir où est le problème.

vérifier sur plunker Ici

quand je clique sur le bouton, il devrait exécuter le plugin iCheck (), mais il ne "t

Réponses:

Vous devez faire une chose pour que tout fonctionne: forcer AngularJS à utiliser réellement jQuery.

AngularJS inclut jQlite dans son code source, mais ce n'est pas la même chose que jQuery. Si vous incluez jQuery avant angular.js alors Angular l'utilisera au lieu de sa propre implémentation.

Il suffit donc de changer ceci dans 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 est avant angular.js)

Plunker de travail

Une meilleure directive iCheck peut être trouvée ici: 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);
});
}
});
});
}
};