使用指令集成 Angular 和 JQuery.iCheck 不起作用 [英] Integration of Angular and JQuery.iCheck by using a directive is not working

问题描述

我正在尝试集成 JQuery.iCheck(用于 checkbox&Radio 按钮 样式的插件).我在这里遵循了一些建议，说集成 jQuery 插件以与 Angular ngRepeat 完全兼容的方法是使用 directives.

所以我实现了一个指令:

webApp.directive('icheck', function($timeout, $parse) {返回 {链接:函数($scope，元素，$attrs){返回 $timeout(function() {var ngModelGetter，值；ngModelGetter = $parse($attrs['ngModel']);value = $parse($attrs['ngValue'])($scope);返回 $(element).iCheck({checkboxClass: 'icheckbox_minimal',radioClass: 'radio_minimal-grey',checkboxClass: 'icheckbox_minimal-grey',增加面积:'20%'}).on('ifChanged', function(event) {if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) {$scope.$apply(function() {返回 ngModelGetter.assign($scope, event.target.checked);});}if ($(element).attr('type') === 'radio' && $attrs['ngModel']) {返回 $scope.$apply(function() {返回 ngModelGetter.assign($scope, value);});}});});}};});

这个 directive 不能完全与我的 ngRepeat 元素 一起使用并且不会改变object vote 的属性.

我的代码 - Git

我的代码:

var webApp = angular.module('webApp', []);//控制器webApp.controller('VotesCtrl', function ($scope, Votes) {$scope.votes = 票数；$scope.statuses = ["Approved","Pending","Trash","Spam"];$scope.selectedID = 1;$scope.expand = 函数(投票){控制台日志(显示")；$scope.vote = 投票；$scope.selectedID = vote.id;};$scope.change = function() {for(var i = 0; i < $scope.votes.length; i++) {如果($scope.votes[i].cb){$scope.votes[i].status = $scope.votes.status;$scope.votes[i].cb = false;}$scope.show = false;}};});//服务webApp.factory('投票', [function() {//临时存储库直到与数据库集成这将被转换为restful get查询投票数 = [{编号:'1'，已创建:1381583344653，更新:'222212'，评级 ID: '3',率:5，ip: '198.168.0.0',状态:'待定'，用户标识:'IP-地址'},{编号:'111'，已创建:1381583344653，更新:'222212'，评级 ID: '4',率:5，ip: '198.168.0.1',状态:'垃圾邮件'，userIdentification:'FLASH-COOKIES'},{编号:'2'，已创建:1382387322693，更新:'222212'，评级 ID: '3',率:1，ip: '198.168.0.2',状态:已批准"，userIdentification:'HTTP-COOKIES'},{编号:'4'，已创建:1382387322693，更新:'222212'，评级 ID: '3',率:1，ip: '198.168.0.3',状态:'垃圾邮件'，用户标识:'IP-地址'}];返回选票；}]);webApp.directive('icheck', function($timeout, $parse) {返回 {链接:函数($scope，元素，$attrs){返回 $timeout(function() {var ngModelGetter，值；ngModelGetter = $parse($attrs['ngModel']);value = $parse($attrs['ngValue'])($scope);返回 $(element).iCheck({checkboxClass: 'icheckbox_minimal',radioClass: 'radio_minimal-grey',checkboxClass: 'icheckbox_minimal-grey',增加面积:'20%'}).on('ifChanged', function(event) {if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) {$scope.$apply(function() {返回 ngModelGetter.assign($scope, event.target.checked);});}if ($(element).attr('type') === 'radio' && $attrs['ngModel']) {返回 $scope.$apply(function() {返回 ngModelGetter.assign($scope, value);});}});});}};});

我的 HTML:

<div><ul><li class="check" ng-click=""><input type="checkbox" ng-model="master"/><li class="创建"><a>创建</a>
<b>IP地址</b>
<b>状态</b>
<ul ng-repeat="投票"><li class="check"><input type="checkbox" ng-model="vote.cb" ng-checked="master"/><li class="created" ng-class="{selected: vote.id == selectedID}"><a href="#" ng-click="expand(vote)">{{vote.created|date}}</a>
{{vote.ip}}
{{vote.status}}

<br/><br/><div class="details" ng-init="expand(votes[0])"><h3>详情:</h3><div>日期:{{vote.created |日期}}

<div>IP:{{vote.ip}}</div><div >饼干:<div><input icheck type="radio" ng-model="vote.userIdentification" name="iCheck" value="FLASH-COOKIES"/><span>FLASH COOKIES</span>

<div><input icheck type="radio" ng-model="vote.userIdentification" name="iCheck" value="HTTP-COOKIES"/><span>HTTP COOKIES</span>

<div><input icheck type="radio" ng-model="vote.userIdentification" name="iCheck" value="IP-ADDRESS"/><span>IP地址</span>