通过使用指令角度和JQuery.iCheck整合不工作 [英] Integration of Angular and JQuery.iCheck by using a directive is not working

查看：143
本文介绍了通过使用指令角度和JQuery.iCheck整合不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想 JQuery.iCheck （插件集成为复选框及电台按钮造型）。
我在这里跟着一些建议，说是集成了jQuery插件的方式与角度完全兼容 ngRepeat 是使用指令。

所以，我实现了一个指令：

  webApp.directive（'I确认'，函数（$超时，$解析）{
    返回{
        链接：功能（$范围，元素，$ ATTRS）{
            返回$超时（函数（）{
                VAR ngModelGetter，价值;
                ngModelGetter = $解析（$ ATTRS ['ngModel']）;
                值= $解析（$ ATTRS ['ngValue']）（$范围内）;
                返回$（元素）.iCheck（{
                    checkboxClass：icheckbox_minimal'，
                    radioClass：iradio_minimal灰色'，
                    checkboxClass：icheckbox_minimal灰色'，
                    increaseArea：'20％'
                }）。在（'ifChanged'，函数（事件）{
                        如果（$（元素）.attr（'型'）===复选框'和;＆安培; $ ATTRS ['ngModel']）{
                            $范围。$应用（函数（）{
                                返回ngModelGetter.assign（$范围，event.target.checked）;
                            }）;
                        }
                        如果（$（元素）.attr（'型'）==='无线电'和;＆安培; $ ATTRS ['ngModel']）{
                            返回$范围。$应用（函数（）{
                                返回ngModelGetter.assign（$范围值）;
                            }）;
                        }
                    }）;
            }）;
        }
    };
}）;

本指令不完全符合我的 ngRepeat元素工作，并不会更改
在对象的属性 投票。

我的code - Git的

我的code： 

  VAR的WebApp = angular.module（'web应用'，[]）;//控制器
webApp.controller（'VotesCtrl'，函数（$范围内，票数）{
    $ scope.votes =票;    $ scope.statuses = [批准，待定，回收站，垃圾邮件];
    $ scope.selectedID = 1;
    $ scope.expand =功能（投票）{
        的console.log（秀）;
        $ scope.vote =投票;        $ scope.selectedID = vote.id;
    };    $ scope.change =功能（）{
        对于（VAR I = 0; I＆LT; $ scope.votes.length;我++）{
            如果（$ scope.votes [I] .CB）{
                $ scope.votes [I] .STATUS = $ scope.votes.status;
                $ scope.votes [I] .CB = FALSE;
            }
            $ scope.show = FALSE;
        }
    };}）;//服务
webApp.factory（'投票'，[功能（）{
    //临时存储库，直到与DB这种集成将被翻译成宁静的GET查询
    VAR票= [
        {
            编号：'1'，
            创建：1381583344653，
            更新：'222212'，
            ratingID：'3'，
            速度：5，
            IP：198.168.0.0，
            状态：待定，
            userIdentification：IP-ADDRESS
        }，
        {
            ID：'111'，
            创建：1381583344653，
            更新：'222212'，
            ratingID：'4'，
            速度：5，
            IP：198.168.0.1，
            状态：垃圾邮件，
            userIdentification：FLASH-COOKIES        }，
        {
            ID：'2'，
            创建：1382387322693，
            更新：'222212'，
            ratingID：'3'，
            速度：1，
            IP：198.168.0.2，
            状态：已批准，
            userIdentification：HTTP-COOKIES        }，
        {            ID：'4'，
            创建：1382387322693，
            更新：'222212'，
            ratingID：'3'，
            速度：1，
            IP：198.168.0.3，
            状态：垃圾邮件，
            userIdentification：IP-ADDRESS
        }
    ];
    返回票;
}]）;
webApp.directive（'I确认'，函数（$超时，$解析）{
    返回{
        链接：功能（$范围，元素，$ ATTRS）{
            返回$超时（函数（）{
                VAR ngModelGetter，价值;
                ngModelGetter = $解析（$ ATTRS ['ngModel']）;
                值= $解析（$ ATTRS ['ngValue']）（$范围内）;
                返回$（元素）.iCheck（{
                    checkboxClass：icheckbox_minimal'，
                    radioClass：iradio_minimal灰色'，
                    checkboxClass：icheckbox_minimal灰色'，
                    increaseArea：'20％'
                }）。在（'ifChanged'，函数（事件）{
                        如果（$（元素）.attr（'型'）===复选框'和;＆安培; $ ATTRS ['ngModel']）{
                            $范围。$应用（函数（）{
                                返回ngModelGetter.assign（$范围，event.target.checked）;
                            }）;
                        }
                        如果（$（元素）.attr（'型'）==='无线电'和;＆安培; $ ATTRS ['ngModel']）{
                            返回$范围。$应用（函数（）{
                                返回ngModelGetter.assign（$范围值）;
                            }）;
                        }
                    }）;
            }）;
        }
    };
}）;

我的HTML： 

 ＆LT;机身NG控制器=VotesCtrl＆GT;
＆LT; D​​IV＆GT;
    ＆LT; UL＆GT;
        ＆LT;李班=检查NG点击=＆GT;
            ＆LT;输入类型=复选框NG模型=主/＆GT;
        ＆LT; /李＆GT;
        ＆LT;李班=创建＆GT;
            ＆LT; A＆GT;制作而成LT; / A＆GT;
        ＆LT; /李＆GT;
        ＆LT;李班=IP＆GT;
            ＆LT; B＆GT; IP地址＆LT; / B＆GT;
        ＆LT; /李＆GT;
        ＆LT;李班=状态＆GT;
            ＆LT; B＆GT;状态和LT; / B＆GT;
        ＆LT; /李＆GT;
    ＆LT; / UL＆GT;
    ＆LT; UL NG重复=投票表决＆GT;
        ＆LT;李班=检查＆GT;
            ＆LT;输入类型=复选框NG模型=vote.cbNG-检查=主/＆GT;
        ＆LT; /李＆GT;
        ＆LT;李班=创造NG-CLASS ={选择：vote.id == selectedID}＆GT;
            ＆LT; A HREF =＃NG点击=展开（票）＆GT; {{vote.created |日期}}＆LT; / A＆GT;
        ＆LT; /李＆GT;
        ＆LT;李班=IP＆GT;
            {{vote.ip}}
        ＆LT; /李＆GT;
        ＆LT;李班=状态＆GT;
            {{vote.status}}
        ＆LT; /李＆GT;
    ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; BR /＆GT;
＆LT; BR /＆GT;
＆LT; D​​IV CLASS =详细信息NG-的init =扩大（票[0]）＆GT;
    ＆LT; H3＆GT;详细信息：LT; / H3 GT＆;
    ＆LT; D​​IV＆GT;日期：{{vote.created |日期}}＆LT; / DIV＆GT;
    ＆LT; D​​IV＆GT; IP：{{vote.ip}}＆LT; / DIV＆GT;
    ＆LT; D​​IV＆GT;
        曲奇饼：
        ＆LT; D​​IV＆GT;
            ＆LT;输入I确认类型=电台NG-模式=vote.userIdentificationNAME =I确认VALUE =FLASH-COOKIES/＆GT;
            ＆LT;跨度＆GT; Flash Cookie与LT; / SPAN＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV＆GT;
            ＆LT;输入I确认类型=电台NG-模式=vote.userIdentificationNAME =I确认VALUE =HTTP-COOKIES/＆GT;
            ＆LT;跨度＆GT;的HTTP cookies＆LT; / SPAN＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV＆GT;
            ＆LT;输入I确认类型=电台NG-模式=vote.userIdentificationNAME =I确认VALUE =IP-ADDRESS/＆GT;
            ＆LT;跨度＆GT; IP地址＆LT; / SPAN＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;


解决方案

已经解决了此链接： https：//开头的github由 wajatimur

.COM / fronteed / I确认/问题/ 62 

  webApp.directive（'I确认'，函数（$超时，$解析）{
    返回{
        要求：'ngModel'，
        链接：功能（$范围，元素，$ ATTRS，ngModel）{
            返回$超时（函数（）{
                VAR值;
                值= $ ATTRS ['值'];                $范围。$腕表（$ ATTRS ['ngModel']，功能（newValue）以{
                    $（元素）.iCheck（更新）;
                }）                返回$（元素）.iCheck（{
                    checkboxClass：icheckbox_flat-航空，
                    radioClass：iradio_flat-航空                }）。在（'ifChanged'，函数（事件）{
                    如果（$（元素）.attr（'型'）===复选框'和;＆安培; $ ATTRS ['ngModel']）{
                        $范围。$应用（函数（）{
                            返回ngModel $ setViewValue（event.target.checked）;
                        }）;
                    }
                    如果（$（元素）.attr（'型'）==='无线电'和;＆安培; $ ATTRS ['ngModel']）{
                        返回$范围。$应用（函数（）{
                            返回ngModel $ setViewValue（值）。
                        }）;
                    }
                }）;
            }）;
        }
    };
}）;

I'm trying to integrate JQuery.iCheck (plugin for checkbox&Radio buttons styling). I followed few suggestions here that said that the way to integrate a jQuery plugins to be fully compatible with Angular ngRepeat is by using directives.

So I implemented a directive:

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

This directive does not fully work with my ngRepeat elements and does not change the properties of the object vote.

My code - Git

My code:

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

My HTML:

<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>

解决方案

Already solved on this link: https://github.com/fronteed/iCheck/issues/62 by wajatimur

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

这篇关于通过使用指令角度和JQuery.iCheck整合不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆