我试图整合
JQuery.iCheck(复选框和放大镜按钮样式的插件).
我在这里提到几个建议,表示集成jQuery插件与Angular ngRepeat完全兼容的方法是使用指令.
我在这里提到几个建议,表示集成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元素,并且不会更改
对象的属性投票.
我的代码：
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);
});
}
});
});
}
};
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
