mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 15:51:16 +08:00
Fixed #138 - radio and checkbox tap/click
This commit is contained in:
45
js/ext/angular/src/directive/ionicCheckbox.js
vendored
45
js/ext/angular/src/directive/ionicCheckbox.js
vendored
@ -9,35 +9,48 @@ angular.module('ionic.ui.checkbox', [])
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
require: '?ngModel',
|
||||
scope: true,
|
||||
template: '<div class="checkbox"><input type="checkbox"><div class="handle"></div></div>',
|
||||
scope: {},
|
||||
template: '<label class="checkbox"><input type="checkbox"></label>',
|
||||
|
||||
|
||||
link: function($scope, $element, $attr, ngModel) {
|
||||
var checkbox, handle;
|
||||
var checkbox;
|
||||
|
||||
if(!ngModel) { return; }
|
||||
|
||||
checkbox = $element.children().eq(0);
|
||||
handle = $element.children().eq(1);
|
||||
|
||||
if(!checkbox.length || !handle.length) { return; }
|
||||
if(!checkbox.length) { return; }
|
||||
|
||||
$scope.checkbox = new ionic.views.Checkbox({
|
||||
el: $element[0],
|
||||
checkbox: checkbox[0],
|
||||
handle: handle[0]
|
||||
});
|
||||
|
||||
$element.bind('click', function(e) {
|
||||
$scope.checkbox.tap(e);
|
||||
var tapHandler = function(e) {
|
||||
checkbox[0].checked = !checkbox[0].checked;
|
||||
$scope.$apply(function() {
|
||||
ngModel.$setViewValue(checkbox[0].checked);
|
||||
});
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
var clickHandler = function(e) {
|
||||
checkbox[0].checked = !checkbox[0].checked;
|
||||
$scope.$apply(function() {
|
||||
ngModel.$setViewValue(checkbox[0].checked);
|
||||
});
|
||||
};
|
||||
|
||||
$scope.$on('$destroy', function() {
|
||||
$element.unbind('tap', tapHandler);
|
||||
$element.unbind('click', clickHandler);
|
||||
});
|
||||
|
||||
ngModel.$render = function() {
|
||||
$scope.checkbox.val(ngModel.$viewValue);
|
||||
};
|
||||
if(ngModel) {
|
||||
$element.bind('tap', tapHandler);
|
||||
$element.bind('click', clickHandler);
|
||||
|
||||
ngModel.$render = function() {
|
||||
console.log('checkbox redern', ngModel.$viewValue);
|
||||
checkbox[0].checked = ngModel.$viewValue;
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
48
js/ext/angular/src/directive/ionicRadio.js
vendored
48
js/ext/angular/src/directive/ionicRadio.js
vendored
@ -15,11 +15,11 @@ angular.module('ionic.ui.radio', [])
|
||||
},
|
||||
transclude: true,
|
||||
template: '<label class="item item-radio">\
|
||||
<input type="radio" name="group">\
|
||||
<div class="item-content" ng-transclude>\
|
||||
</div>\
|
||||
<i class="radio-icon icon ion-checkmark"></i>\
|
||||
</label>',
|
||||
<input type="radio" name="group">\
|
||||
<div class="item-content" ng-transclude>\
|
||||
</div>\
|
||||
<i class="radio-icon icon ion-checkmark"></i>\
|
||||
</label>',
|
||||
|
||||
link: function($scope, $element, $attr, ngModel) {
|
||||
var radio;
|
||||
@ -30,20 +30,34 @@ angular.module('ionic.ui.radio', [])
|
||||
|
||||
if(!radio.length) { return; }
|
||||
|
||||
radio.bind('click', function(e) {
|
||||
$scope.$apply(function() {
|
||||
ngModel.$setViewValue($scope.$eval($attr.ngValue));
|
||||
});
|
||||
var tapHandler = function(e) {
|
||||
radio[0].checked = true;
|
||||
ngModel.$setViewValue($scope.$eval($attr.ngValue));
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
var clickHandler = function(e) {
|
||||
ngModel.$setViewValue($scope.$eval($attr.ngValue));
|
||||
};
|
||||
|
||||
$scope.$on('$destroy', function() {
|
||||
$element.unbind('tap', tapHandler);
|
||||
$element.unbind('click', clickHandler);
|
||||
});
|
||||
|
||||
ngModel.$render = function() {
|
||||
var val = $scope.$eval($attr.ngValue);
|
||||
if(val === ngModel.$viewValue) {
|
||||
radio.attr('checked', 'checked');
|
||||
} else {
|
||||
radio.removeAttr('checked');
|
||||
}
|
||||
};
|
||||
if(ngModel) {
|
||||
$element.bind('tap', tapHandler);
|
||||
$element.bind('click', clickHandler);
|
||||
|
||||
ngModel.$render = function() {
|
||||
var val = $scope.$eval($attr.ngValue);
|
||||
if(val === ngModel.$viewValue) {
|
||||
radio.attr('checked', 'checked');
|
||||
} else {
|
||||
radio.removeAttr('checked');
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user