Angularjs 使用指令集成Angular和JQuery.iCheck无效_Angularjs_Angularjs Directive_Angularjs Ng Repeat_Icheck

Angularjs 使用指令集成Angular和JQuery.iCheck无效

angularjs

Angularjs 使用指令集成Angular和JQuery.iCheck无效,angularjs,angularjs-directive,angularjs-ng-repeat,icheck,Angularjs,Angularjs Directive,Angularjs Ng Repeat,Icheck,我正在尝试集成（用于复选框和单选按钮的插件样式）。我在这里遵循了一些建议，即集成jQuery插件以与AngularngRepeat完全兼容的方法是使用指令所以我执行了一个指令： webApp.directive('icheck', function($timeout, $parse) { return { link: function($scope, element, $attrs) { return $timeout(function() {

我正在尝试集成（用于

复选框和单选按钮的插件

样式）。我在这里遵循了一些建议，即集成jQuery插件以与Angular

ngRepeat

完全兼容的方法是使用

指令
所以我执行了一个指令
：
webApp.directive('icheck', function($timeout, $parse) {
    return {
        link: function($scope, element, $attrs) {
            return $timeout(function() {
                var ngModelGetter, value;
                ngModelGetter = $parse($attrs['ngModel']);
                value = $parse($attrs['ngValue'])($scope);
                return $(element).iCheck({
                    checkboxClass: 'icheckbox_minimal',
                    radioClass: 'iradio_minimal-grey',
                    checkboxClass: 'icheckbox_minimal-grey',
                    increaseArea: '20%'
                }).on('ifChanged', function(event) {
                        if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) {
                            $scope.$apply(function() {
                                return ngModelGetter.assign($scope, event.target.checked);
                            });
                        }
                        if ($(element).attr('type') === 'radio' && $attrs['ngModel']) {
                            return $scope.$apply(function() {
                                return ngModelGetter.assign($scope, value);
                            });
                        }
                    });
            });
        }
    };
});  

此指令
不完全适用于myngRepeat元素，并且不会更改
对象的属性
投票


我的代码：
var webApp = angular.module('webApp', []);

//controllers
webApp.controller ('VotesCtrl', function ($scope, Votes) {
    $scope.votes  = Votes;

    $scope.statuses = ["Approved","Pending","Trash","Spam"];
    $scope.selectedID = 1;
    $scope.expand = function(vote) {
        console.log("show");
        $scope.vote = vote;

        $scope.selectedID = vote.id;
    };

    $scope.change = function() {
        for(var i = 0; i < $scope.votes.length; i++) {
            if($scope.votes[i].cb) {
                $scope.votes[i].status = $scope.votes.status;
                $scope.votes[i].cb = false;
            }
            $scope.show = false;
        }
    };

});

//services
webApp.factory('Votes', [function() {
    //temporary repository till integration with DB this will be translated into restful get query
    var votes = [
        {
            id: '1',
            created: 1381583344653,
            updated: '222212',
            ratingID: '3',
            rate: 5,
            ip: '198.168.0.0',
            status: 'Pending',
            userIdentification:'IP-ADDRESS'
        },
        {
            id: '111',
            created: 1381583344653,
            updated: '222212',
            ratingID: '4',
            rate: 5,
            ip: '198.168.0.1',
            status: 'Spam',
            userIdentification:'FLASH-COOKIES'

        },
        {
            id: '2',
            created: 1382387322693,
            updated: '222212',
            ratingID: '3',
            rate: 1,
            ip: '198.168.0.2',
            status: 'Approved',
            userIdentification:'HTTP-COOKIES'

        },
        {

            id: '4',
            created: 1382387322693,
            updated: '222212',
            ratingID: '3',
            rate: 1,
            ip: '198.168.0.3',
            status: 'Spam',
            userIdentification:'IP-ADDRESS'
        }
    ];
    return votes;
}]);


webApp.directive('icheck', function($timeout, $parse) {
    return {
        link: function($scope, element, $attrs) {
            return $timeout(function() {
                var ngModelGetter, value;
                ngModelGetter = $parse($attrs['ngModel']);
                value = $parse($attrs['ngValue'])($scope);
                return $(element).iCheck({
                    checkboxClass: 'icheckbox_minimal',
                    radioClass: 'iradio_minimal-grey',
                    checkboxClass: 'icheckbox_minimal-grey',
                    increaseArea: '20%'
                }).on('ifChanged', function(event) {
                        if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) {
                            $scope.$apply(function() {
                                return ngModelGetter.assign($scope, event.target.checked);
                            });
                        }
                        if ($(element).attr('type') === 'radio' && $attrs['ngModel']) {
                            return $scope.$apply(function() {
                                return ngModelGetter.assign($scope, value);
                            });
                        }
                    });
            });
        }
    };
});

<body ng-controller="VotesCtrl">
<div>
    <ul>
        <li class="check" ng-click="">
            <input type="checkbox" ng-model="master" />
        </li>
        <li class="created">
            <a>CREATED</a>
        </li>
        <li class="ip">
            <b>IP ADDRESS</b>
        </li>
        <li class="status">
            <b>STATUS</b>
        </li>
    </ul>
    <ul ng-repeat="vote in votes">
        <li class="check">
            <input type="checkbox" ng-model="vote.cb" ng-checked="master" />
        </li>
        <li class="created" ng-class="{selected: vote.id == selectedID}">
            <a href="#" ng-click="expand(vote)">{{vote.created|date}}</a>
        </li>
        <li class="ip">
            {{vote.ip}}
        </li>
        <li class="status">
            {{vote.status}}
        </li>
    </ul>
</div>
<br />
<br />
<div class="details" ng-init="expand(votes[0])">
    <h3>Details:</h3>
    <div>DATE: {{vote.created | date}}</div>
    <div>IP: {{vote.ip}}</div>
    <div >
        Cookies:
        <div>
            <input icheck type="radio" ng-model="vote.userIdentification" name="iCheck" value="FLASH-COOKIES" />
            <span>FLASH COOKIES</span>
        </div>
        <div>
            <input icheck type="radio" ng-model="vote.userIdentification" name="iCheck" value="HTTP-COOKIES" />
            <span>HTTP COOKIES</span>
        </div>
        <div>
            <input icheck type="radio" ng-model="vote.userIdentification" name="iCheck" value="IP-ADDRESS" />
            <span>IP ADDRESS</span>
        </div>
    </div>
</div>
</body>

var webApp=angular.module（'webApp'，[]）；
//控制器
webApp.controller（'VotesCtrl'，函数（$scope，vots）{
$scope.voces=投票；
$scope.status=[“已批准”、“待定”、“垃圾”、“垃圾邮件”]；
$scope.selectedID=1；
$scope.expand=函数（投票）{
控制台日志（“显示”）；
$scope.vote=投票；
$scope.selectedID=vote.id；
};
$scope.change=函数（）{
对于（变量i=0；i<$scope.vowers.length；i++）{
if（$scope.voces[i].cb）{
$scope.voces[i]。状态=$scope.voces.status；
$scope.voces[i].cb=false；
}
$scope.show=false；
}
};
});
//服务
webApp.factory（'投票'，[function（））{
//在与DB集成之前，临时存储库将转换为restful get查询
var投票=[
{
id:'1'，
创建日期：1381583344653，
更新：“222212”，
ratingID:'3'，
比率：5，
ip:'198.168.0.0'，
状态：“待定”，
用户标识：'IP地址'
},
{
id:'111'，
创建日期：1381583344653，
更新：“222212”，
ratingID:'4'，
比率：5，
ip:'198.168.0.1'，
状态：“垃圾邮件”，
用户标识：'FLASH-COOKIES'
},
{
id:'2'，
创建日期：1382387322693，
更新：“222212”，
ratingID:'3'，
比率：1，
ip:'198.168.0.2'，
状态：“已批准”，
用户标识：'HTTP-COOKIES'
},
{
id:'4'，
创建日期：1382387322693，
更新：“222212”，
ratingID:'3'，
比率：1，
ip:'198.168.0.3'，
状态：“垃圾邮件”，
用户标识：'IP地址'
}
];
返回投票；
}]);
webApp.directive（'icheck'，function（$timeout，$parse）{
返回{
链接：函数（$scope，element，$attrs）{
返回$timeout（函数（）{
var-ngModelGetter，value；
ngModelGetter=$parse（$attrs['ngModel']）；
value=$parse（$attrs['ngValue']）（$scope）；
返回$（元素）.iCheck({
checkboxClass:'icheckbox_minimal'，
无线电类：“伊拉迪奥·格雷”，
checkboxClass:“icheckbox_最小灰色”，
增加面积：“20%”
}).on（'ifChanged'，函数（事件）{
if（$（element.attr（'type'）=='checkbox'&&&$attrs['ngModel']））{
$scope.$apply（函数（）{
返回ngModelGetter.assign（$scope，event.target.checked）；
});
}
if（$（element.attr（'type'）=='radio'&&$attrs['ngModel']））{
返回$scope.$apply（函数（）{
返回ngModelGetter.assign（$scope，value）；
});
}
});
});
}
};
});

我的HTML:
var webApp = angular.module('webApp', []);

//controllers
webApp.controller ('VotesCtrl', function ($scope, Votes) {
    $scope.votes  = Votes;

    $scope.statuses = ["Approved","Pending","Trash","Spam"];
    $scope.selectedID = 1;
    $scope.expand = function(vote) {
        console.log("show");
        $scope.vote = vote;

        $scope.selectedID = vote.id;
    };

    $scope.change = function() {
        for(var i = 0; i < $scope.votes.length; i++) {
            if($scope.votes[i].cb) {
                $scope.votes[i].status = $scope.votes.status;
                $scope.votes[i].cb = false;
            }
            $scope.show = false;
        }
    };

});

//services
webApp.factory('Votes', [function() {
    //temporary repository till integration with DB this will be translated into restful get query
    var votes = [
        {
            id: '1',
            created: 1381583344653,
            updated: '222212',
            ratingID: '3',
            rate: 5,
            ip: '198.168.0.0',
            status: 'Pending',
            userIdentification:'IP-ADDRESS'
        },
        {
            id: '111',
            created: 1381583344653,
            updated: '222212',
            ratingID: '4',
            rate: 5,
            ip: '198.168.0.1',
            status: 'Spam',
            userIdentification:'FLASH-COOKIES'

        },
        {
            id: '2',
            created: 1382387322693,
            updated: '222212',
            ratingID: '3',
            rate: 1,
            ip: '198.168.0.2',
            status: 'Approved',
            userIdentification:'HTTP-COOKIES'

        },
        {

            id: '4',
            created: 1382387322693,
            updated: '222212',
            ratingID: '3',
            rate: 1,
            ip: '198.168.0.3',
            status: 'Spam',
            userIdentification:'IP-ADDRESS'
        }
    ];
    return votes;
}]);


webApp.directive('icheck', function($timeout, $parse) {
    return {
        link: function($scope, element, $attrs) {
            return $timeout(function() {
                var ngModelGetter, value;
                ngModelGetter = $parse($attrs['ngModel']);
                value = $parse($attrs['ngValue'])($scope);
                return $(element).iCheck({
                    checkboxClass: 'icheckbox_minimal',
                    radioClass: 'iradio_minimal-grey',
                    checkboxClass: 'icheckbox_minimal-grey',
                    increaseArea: '20%'
                }).on('ifChanged', function(event) {
                        if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) {
                            $scope.$apply(function() {
                                return ngModelGetter.assign($scope, event.target.checked);
                            });
                        }
                        if ($(element).attr('type') === 'radio' && $attrs['ngModel']) {
                            return $scope.$apply(function() {
                                return ngModelGetter.assign($scope, value);
                            });
                        }
                    });
            });
        }
    };
});

<body ng-controller="VotesCtrl">
<div>
    <ul>
        <li class="check" ng-click="">
            <input type="checkbox" ng-model="master" />
        </li>
        <li class="created">
            <a>CREATED</a>
        </li>
        <li class="ip">
            <b>IP ADDRESS</b>
        </li>
        <li class="status">
            <b>STATUS</b>
        </li>
    </ul>
    <ul ng-repeat="vote in votes">
        <li class="check">
            <input type="checkbox" ng-model="vote.cb" ng-checked="master" />
        </li>
        <li class="created" ng-class="{selected: vote.id == selectedID}">
            <a href="#" ng-click="expand(vote)">{{vote.created|date}}</a>
        </li>
        <li class="ip">
            {{vote.ip}}
        </li>
        <li class="status">
            {{vote.status}}
        </li>
    </ul>
</div>
<br />
<br />
<div class="details" ng-init="expand(votes[0])">
    <h3>Details:</h3>
    <div>DATE: {{vote.created | date}}</div>
    <div>IP: {{vote.ip}}</div>
    <div >
        Cookies:
        <div>
            <input icheck type="radio" ng-model="vote.userIdentification" name="iCheck" value="FLASH-COOKIES" />
            <span>FLASH COOKIES</span>
        </div>
        <div>
            <input icheck type="radio" ng-model="vote.userIdentification" name="iCheck" value="HTTP-COOKIES" />
            <span>HTTP COOKIES</span>
        </div>
        <div>
            <input icheck type="radio" ng-model="vote.userIdentification" name="iCheck" value="IP-ADDRESS" />
            <span>IP ADDRESS</span>
        </div>
    </div>
</div>
</body>








{{vote.ip}


{{投票.状态}






细节：
日期：{vote.created | DATE}
IP:{{vote.IP}
曲奇饼：
闪光饼干
HTTP COOKIES
IP地址
此链接已解决：由
对于XaReSx答案中的代码，我有一个问题：当从示波器更新模型时，收音机没有改变。
我必须在模型手表中添加一个超时：
$scope.$watch($attrs['ngModel'], function (newValue) {
    $timeout(function () {
        $(element).iCheck('update');
    })
})

这里有一个更好的解决方案
  .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');
                });

                $scope.$watch($attrs['ngDisabled'], function (newValue) {
                    $(element).iCheck(newValue ? 'disable' : 'enable');
                    $(element).iCheck('update');
                })

                return $(element).iCheck({
                    checkboxClass: 'icheckbox_square-blue',
                    radioClass: 'iradio_square-blue'

                }).on('ifChanged', function (event) {
                    if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) {
                        $scope.$apply(function () {
                            return ngModel.$setViewValue(event.target.checked);
                        })
                    }
                }).on('ifClicked', function (event) {
                    if ($(element).attr('type') === 'radio' && $attrs['ngModel']) {
                        return $scope.$apply(function () {
                            //set up for radio buttons to be de-selectable
                            if (ngModel.$viewValue != value)
                                return ngModel.$setViewValue(value);
                            else
                                ngModel.$setViewValue(null);
                            ngModel.$render();
                            return
                        });
                    }
                });
            });
        }
    };
});

仅供参考，您引用的问题仍在继续讨论，因此值得再次检查，而不仅仅是复制/粘贴此答案。这解决了我在将现有代码库从es5升级到es6时使用iCheck遇到的问题