Skip to content

Commit

Permalink
fix(ionCheckbox): make ng-checked and ng-change work
Browse files Browse the repository at this point in the history
Closes #1349. Closes #1361

BREAKING CHANGE: ion-checkbox no longer has an isolate scope.

This will break your checkbox only if you were relying upon the
checkbox having an isolate scope: if you were referencing
`$parent.value` as the ng-disabled attribute, for example.

Change your code from this:

```html
<ion-checkbox ng-disabled="{{$parent.isDisabled}}"></ion-checkbox>
```

To this:

```html
<ion-checkbox ng-disabled="{{isDisabled}}"></ion-checkbox>
```
  • Loading branch information
ajoslin committed May 13, 2014
1 parent 07da4ce commit a006d89
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 20 deletions.
30 changes: 15 additions & 15 deletions js/angular/directive/checkbox.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,30 +21,30 @@ IonicModule
restrict: 'E',
replace: true,
require: '?ngModel',
scope: {
ngModel: '=?',
ngValue: '=?',
ngChecked: '=?',
ngDisabled: '=?',
ngChange: '&'
},
transclude: true,

template: '<label class="item item-checkbox">' +
'<div class="checkbox checkbox-input-hidden disable-pointer-events">' +
'<input type="checkbox" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
'<input type="checkbox">' +
'<i class="checkbox-icon"></i>' +
'</div>' +
'<div class="item-content disable-pointer-events" ng-transclude></div>' +
'</label>',

compile: function(element, attr) {
var input = element.find('input');
if(attr.name) input.attr('name', attr.name);
if(attr.ngChecked) input.attr('ng-checked', attr.ngChecked);
if(attr.ngDisabled) input.attr('ng-disabled', attr.ngDisabled);
if(attr.ngTrueValue) input.attr('ng-true-value', attr.ngTrueValue);
if(attr.ngFalseValue) input.attr('ng-false-value', attr.ngFalseValue);
forEach({
'name': attr.name,
'ng-value': attr.ngValue,
'ng-model': attr.ngModel,
'ng-checked': attr.ngChecked,
'ng-disabled': attr.ngDisabled,
'ng-true-value': attr.ngTrueValue,
'ng-false-value': attr.ngFalseValue,
'ng-change': attr.ngChange
}, function(value, name) {
if (isDefined(value)) {
input.attr(name, value);
}
});
}

};
Expand Down
6 changes: 6 additions & 0 deletions test/html/toggle.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ <h1 class="title">Toggle</h1>
<div ng-controller="TestCtrl">

<div class="list">
<ion-checkbox ng-model="checkModel" ng-change="myChange = checkModel">
Main Check
</ion-checkbox>
<ion-checkbox ng-checked="myChange">
Follows ng-change of Main Check
</ion-checkbox>
<ion-toggle ng-model="myModel" ng-disabled="isDisabled">myModel ({{!!myModel}})</ion-toggle>
<ion-toggle ng-model="catModel" ng-disabled="isDisabled" ng-true-value="cats" ng-false-value="dogs">Cats or dogs? ({{catModel}})</ion-toggle>
<ion-toggle ng-model="isDisabled">Disable myModel ({{!!isDisabled}})</ion-toggle>
Expand Down
25 changes: 20 additions & 5 deletions test/unit/angular/directive/checkbox.unit.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,28 @@ describe('Ionic Checkbox', function() {
});

it('should pass down attrs', function() {
el = compile('<ion-checkbox ng-checked=1 ng-disabled=2 ng-true-value=3 ng-false-value=4>')(scope);
el = compile('<ion-checkbox name="name" ng-model="model" ng-checked="checked" ng-disabled="disabled" ng-true-value="true-value" ng-false-value="false-value" ng-change="change">')(scope);
scope.$apply();
var input = el.find('input');
expect(input.attr('ng-checked')).toBe('1');
expect(input.attr('ng-disabled')).toBe('2');
expect(input.attr('ng-true-value')).toBe('3');
expect(input.attr('ng-false-value')).toBe('4');
expect(input.attr('name')).toBe('name');
expect(input.attr('ng-model')).toBe('model');
expect(input.attr('ng-checked')).toBe('checked');
expect(input.attr('ng-disabled')).toBe('disabled');
expect(input.attr('ng-true-value')).toBe('true-value');
expect(input.attr('ng-false-value')).toBe('false-value');
expect(input.attr('ng-change')).toBe('change');
});

it('shouhld ngChecked properly', function() {
el = compile('<ion-checkbox ng-checked="shouldCheck">')(scope);
scope.$apply();
var input = el.find('input');
expect(input[0].hasAttribute('checked')).toBe(false);
scope.$apply('shouldCheck = true');
expect(input[0].hasAttribute('checked')).toBe(true);
scope.$apply('shouldCheck = false');
expect(input[0].hasAttribute('checked')).toBe(false);

});

});

0 comments on commit a006d89

Please sign in to comment.