refactor(buttons): use $render instead of model $watch

angular-ui · Jun 15, 2013 · 9c62409 · 9c62409
1 parent 853199e
commit 9c62409
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/src/buttons/buttons.js b/src/buttons/buttons.js
@@ -17,21 +17,20 @@ angular.module('ui.bootstrap.buttons', [])
       var value = scope.$eval(attrs.btnRadio);
 
       //model -> UI
-      scope.$watch(function () {
-        return ngModelCtrl.$modelValue;
-      }, function (modelValue) {
-        if (angular.equals(modelValue, value)){
+      ngModelCtrl.$render = function () {
+        if (angular.equals(ngModelCtrl.$modelValue, value)){
           element.addClass(activeClass);
         } else {
           element.removeClass(activeClass);
         }
-      });
+      };
 
       //ui->model
       element.bind(toggleEvent, function () {
         if (!element.hasClass(activeClass)) {
           scope.$apply(function () {
             ngModelCtrl.$setViewValue(value);
+            ngModelCtrl.$render();
           });
         }
       });
@@ -55,20 +54,19 @@ angular.module('ui.bootstrap.buttons', [])
       falseValue = angular.isDefined(falseValue) ? falseValue : false;
 
       //model -> UI
-      scope.$watch(function () {
-        return ngModelCtrl.$modelValue;
-      }, function (modelValue) {
-        if (angular.equals(modelValue, trueValue)) {
+      ngModelCtrl.$render = function () {
+        if (angular.equals(ngModelCtrl.$modelValue, trueValue)) {
           element.addClass(activeClass);
         } else {
           element.removeClass(activeClass);
         }
-      });
+      };
 
       //ui->model
       element.bind(toggleEvent, function () {
         scope.$apply(function () {
           ngModelCtrl.$setViewValue(element.hasClass(activeClass) ? falseValue : trueValue);
+          ngModelCtrl.$render();
         });
       });
     }

diff --git a/src/buttons/test/buttons.spec.js b/src/buttons/test/buttons.spec.js
@@ -44,8 +44,11 @@ describe('buttons', function () {
 
       btn.click();
       expect($scope.model).toEqual(true);
+      expect(btn).toHaveClass('active');
+
       btn.click();
       expect($scope.model).toEqual(false);
+      expect(btn).not.toHaveClass('active');
     });
 
     it('should toggle custom model values on click', function () {
@@ -54,8 +57,11 @@ describe('buttons', function () {
 
       btn.click();
       expect($scope.model).toEqual(1);
+      expect(btn).toHaveClass('active');
+
       btn.click();
       expect($scope.model).toEqual(0);
+      expect(btn).not.toHaveClass('active');
     });
   });
 
@@ -86,9 +92,13 @@ describe('buttons', function () {
 
       btns.eq(0).click();
       expect($scope.model).toEqual(1);
+      expect(btns.eq(0)).toHaveClass('active');
+      expect(btns.eq(1)).not.toHaveClass('active');
 
       btns.eq(1).click();
       expect($scope.model).toEqual(2);
+      expect(btns.eq(1)).toHaveClass('active');
+      expect(btns.eq(0)).not.toHaveClass('active');
     });
   });
 });