fix(toggle): fix ngChange being reported before model changes

Closes #1349, #1741 BREAKING CHANGE: ion-toggle no longer has an isolate scope. This will break your toggle only if you were relying upon the toggle having an isolate scope: if you were referencing `$parent.value` as the ng-disabled attribute, for example. Change your code from this: <ion-toggle ng-disabled="{{$parent.isDisabled}}"></ion-toggle> To this: <ion-toggle ng-disabled="{{isDisabled}}"></ion-toggle>
ionic-team · Jul 11, 2014 · 537b29d · 537b29d
1 parent 3dea57d
commit 537b29d
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 35 deletions.
diff --git a/js/angular/directive/checkbox.js b/js/angular/directive/checkbox.js
@@ -23,13 +23,14 @@ IonicModule
     replace: true,
     require: '?ngModel',
     transclude: true,
-    template: '<label class="item item-checkbox">' +
-                '<div class="checkbox checkbox-input-hidden disable-pointer-events">' +
-                  '<input type="checkbox">' +
-                  '<i class="checkbox-icon"></i>' +
-                '</div>' +
-                '<div class="item-content disable-pointer-events" ng-transclude></div>' +
-              '</label>',
+    template:
+      '<label class="item item-checkbox">' +
+        '<div class="checkbox checkbox-input-hidden disable-pointer-events">' +
+          '<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');
       forEach({

diff --git a/js/angular/directive/toggle.js b/js/angular/directive/toggle.js
@@ -32,33 +32,34 @@ function($ionicGesture, $timeout) {
     restrict: 'E',
     replace: true,
     require: '?ngModel',
-    scope: {
-      ngModel: '=?',
-      ngValue: '=?',
-      ngChecked: '=?',
-      ngChange: '&',
-      ngDisabled: '=?'
-    },
     transclude: true,
-    template: '<div class="item item-toggle">' +
-                '<div ng-transclude></div>' +
-                '<label class="toggle">' +
-                  '<input type="checkbox" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()" ng-disabled="ngDisabled">' +
-                  '<div class="track">' +
-                    '<div class="handle"></div>' +
-                  '</div>' +
-                '</label>' +
-              '</div>',
+    template:
+      '<div class="item item-toggle">' +
+        '<div ng-transclude></div>' +
+        '<label class="toggle">' +
+          '<input type="checkbox">' +
+          '<div class="track">' +
+            '<div class="handle"></div>' +
+          '</div>' +
+        '</label>' +
+      '</div>',
 
     compile: function(element, attr) {
       var input = element.find('input');
-      if(attr.name) input.attr('name', attr.name);
-      if(attr.ngChecked) input.attr('ng-checked', 'ngChecked');
-      if(attr.ngTrueValue) input.attr('ng-true-value', attr.ngTrueValue);
-      if(attr.ngFalseValue) input.attr('ng-false-value', attr.ngFalseValue);
-      if(attr.toggleClass) {
-        element[0].getElementsByTagName('label')[0].classList.add(attr.toggleClass);
-      }
+      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);
+        }
+      });
 
       return function($scope, $element, $attr) {
          var el, checkbox, track, handle;

diff --git a/test/html/toggle.html b/test/html/toggle.html
@@ -18,6 +18,9 @@ <h1 class="title">Toggle</h1>
       <div ng-controller="TestCtrl">
 
         <div class="list">
+          <ion-toggle ng-model="checkModel2" ng-change="myChange = checkModel2">
+            Main Check
+          </ion-toggle>
           <ion-checkbox ng-model="checkModel" ng-change="myChange = checkModel">
             Main Check
           </ion-checkbox>

diff --git a/test/unit/angular/directive/toggle.unit.js b/test/unit/angular/directive/toggle.unit.js
@@ -10,16 +10,16 @@ describe('Ionic Toggle', function() {
   }));
 
   it('Should load', function() {
-    var toggleView = el.isolateScope().toggle;
+    var toggleView = el.scope().toggle;
     expect(toggleView).not.toEqual(null);
     expect(toggleView.checkbox).not.toEqual(null);
     expect(toggleView.handle).not.toEqual(null);
   });
 
   it('Should destroy', function() {
-    var toggleView = el.isolateScope().toggle;
+    var toggleView = el.scope().toggle;
     spyOn(toggleView, 'destroy');
-    el.isolateScope().$destroy();
+    el.scope().$destroy();
     expect(toggleView.destroy).toHaveBeenCalled();
   });
 
@@ -31,7 +31,7 @@ describe('Ionic Toggle', function() {
 
     // Grab fields
     var label = el[0].querySelector('label');
-    var toggle = el.isolateScope().toggle;
+    var toggle = el.scope().toggle;
     var input = el[0].querySelector('input');
 
     // Not disabled, we can toggle
@@ -59,7 +59,7 @@ describe('Ionic Toggle', function() {
   });
 
   it('Should toggle', function() {
-    var toggle = el.isolateScope().toggle;
+    var toggle = el.scope().toggle;
     var label = el[0].querySelector('label');
     expect(toggle.val()).toBe(false);
     ionic.trigger('click', {target: label});