angularjs – 通过使用指令集成Angular和JQuery.iCheck不起作用

我试图整合 JQuery.iCheck(复选框和放大镜按钮样式的插件).
我在这里提到几个建议,表示集成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);
                            });
                        }
                    });
            });
        }
    };
});

此指令不能完全用于我的ngRepeat元素,并且不会更改
对象的属性投票.

My code – Git

我的代码：

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',ratingID: '4',ip: '198.168.0.1',status: 'Spam',userIdentification:'FLASH-COOKIES'

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

        },{

            id: '4',ip: '198.168.0.3',userIdentification:'IP-ADDRESS'
        }
    ];
    return votes;
}]);


webApp.directive('icheck',value);
                            });
                        }
                    });
            });
        }
    };
});

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

已经解决了这个链接： https://github.com/fronteed/iCheck/issues/62到 wajatimur

webApp.directive('icheck',$parse) {
    return {
        require: 'ngModel',link: function($scope,$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);
                        });
                    }
                });
            });
        }
    };
});

angularjs – 通过使用指令集成Angular和JQuery.iCheck不起作用

猜你在找的Angularjs相关文章