fix(dropdown): unbind toggle element event on scope destroy

bekos · benjaminch · commit 36dd04fe66ec · 2014-05-10T13:57:47.000+02:00
Also, change the way disabled dropdownToggle is read from `attrs` instead of element property. Closes angular-ui#1867 Closes angular-ui#1870 Add an optionnal parameter on timepicker object in order to control the visibility of the controls arrows. chore(tests): Add unit tests for arrows control visibility Fixing demo semi colon issue. chore(release): Add unit tests chore(timepicker): Add LOC to check the user's input chore(timepicker): Remove method for showArrowControls option chore(timepicker): Remove Show / Hide option from demo chore(timepicker): Hides <tr> element rather than <td> element. chore(tests): Simplify arrows control visibility tests chore(tests): Refactoring arrow visibility tests fix(dropdown): unbind toggle element event on scope destroy Also, change the way disabled dropdownToggle is read from `attrs` instead of element property. Closes angular-ui#1867 Closes angular-ui#1870 Add an optionnal parameter on timepicker object in order to control the visibility of the controls arrows. chore(tests): Add unit tests for arrows control visibility Fixing demo semi colon issue. chore(release): Add unit tests chore(timepicker): Add LOC to check the user's input chore(timepicker): Remove method for showArrowControls option chore(timepicker): Remove Show / Hide option from demo chore(timepicker): Hides <tr> element rather than <td> element. chore(tests): Simplify arrows control visibility tests chore(tests): Refactoring arrow visibility tests refactor(rating): use `track by` in template Closes angular-ui#1724 refactor(pagination): add `href` and `track by` in templates Closes angular-ui#1725 fix(progressbar): allow fractional values for bar width * Fractions are limited to two decimals, and are not included in aria values. Closes angular-ui#1761 fix(dropdown): use $animate for adding and removing classes Closes angular-ui#1644 feat(datepicker): add `datepicker-mode`, `init-date` & today hint * Add two-way binded `datepicker-mode`. * Add optional `init-date` when no model value is specified. * Add hint for current date. * Use isolated scope for popup directive. * Use optional binding for `isOpen`. * Split each mode into it's own directive. Closes angular-ui#1599 BREAKING CHANGE: `show-weeks` is no longer a watched attribute `*-format` attributes have been renamed to `format-*` `min` attribute has been renamed to `min-date` `max` attribute has been renamed to `max-date` refactor(rating): evaluate attributes inside init function Closes angular-ui#1590 Closes angular-ui#1768 refactor(pagination): remove unused watch Closes angular-ui#1769 fix(typeahead): correctly higlight numeric matches Fixes angular-ui#1777 refactor(typeahead): use `ng-if` and `track by` in template Closes angular-ui#1722 demo(typeahead): correct demo for asyn results Fixes angular-ui#1740 refactor(datepicker): track buttons by date instead of $index refactor(pagination): move boundary & directions to the template Closes angular-ui#795 Closes angular-ui#1770 feat(alert): add WAI-ARIA markup Closes angular-ui#1806 chore(demo): fix fork button width Closes angular-ui#1805 fix(datepicker): `Today` button should not set time Fixes angular-ui#1726 Closes angular-ui#1808 fix(progressbar): number filter in bar template and only for percent Closes angular-ui#1807 refactor(dropdown): remove isolated scope Closes angular-ui#1818 feat(typeahead): add WAI-ARIA markup Closes angular-ui#1814 refactor(accordion): transclude function in compile is deprecated. Closes angular-ui#1789 refactor(carousel): use `track by` in template Closes angular-ui#1723 fix(datepicker): mark input field as invalid if the date is invalid Closes angular-ui#1845 Conflicts: src/datepicker/datepicker.js src/datepicker/test/datepicker.spec.js
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
@@ -320,18 +320,30 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon
       var dateFormat,
           closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? scope.$parent.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection,
           appendToBody = angular.isDefined(attrs.datepickerAppendToBody) ? scope.$parent.$eval(attrs.datepickerAppendToBody) : datepickerPopupConfig.appendToBody;
+<<<<<<< HEAD
+=======
 
       scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? scope.$parent.$eval(attrs.showButtonBar) : datepickerPopupConfig.showButtonBar;
 
       scope.getText = function( key ) {
         return scope[key + 'Text'] || datepickerPopupConfig[key + 'Text'];
       };
+>>>>>>> 76acfef... refactor(rating): use `track by` in template
+
+      scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? scope.$parent.$eval(attrs.showButtonBar) : datepickerPopupConfig.showButtonBar;
+
+<<<<<<< HEAD
+      scope.getText = function( key ) {
+        return scope[key + 'Text'] || datepickerPopupConfig[key + 'Text'];
+      };
 
       attrs.$observe('datepickerPopup', function(value) {
           dateFormat = value || datepickerPopupConfig.datepickerPopup;
           ngModel.$render();
       });
 
+=======
+>>>>>>> 76acfef... refactor(rating): use `track by` in template
       // popup element used to display calendar
       var popupEl = angular.element('<div datepicker-popup-wrap><div datepicker></div></div>');
       popupEl.attr({
diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js
@@ -795,6 +795,7 @@ describe('datepicker directive', function () {
 
   });
 
+<<<<<<< HEAD
   describe('setting datepickerPopupConfig', function() {
     var originalConfig = {};
     beforeEach(inject(function(datepickerPopupConfig) {
@@ -815,6 +816,8 @@ describe('datepicker directive', function () {
 
   });
 
+=======
+>>>>>>> 76acfef... refactor(rating): use `track by` in template
   describe('as popup', function () {
     var inputEl, dropdownEl, changeInputValueTo, $document;
 
diff --git a/src/dropdown/docs/demo.html b/src/dropdown/docs/demo.html
@@ -14,7 +14,7 @@
 
     <!-- Single button -->
     <div class="btn-group" dropdown is-open="status.isopen">
-      <button type="button" class="btn btn-primary dropdown-toggle">
+      <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
         Button dropdown <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu">
@@ -45,6 +45,7 @@
     <hr />
     <p>
         <button type="button" class="btn btn-default btn-sm" ng-click="toggleDropdown($event)">Toggle button dropdown</button>
+        <button type="button" class="btn btn-warning btn-sm" ng-click="disabled = !disabled">Enable/Disable</button>
     </p>
 
 </div>
diff --git a/src/dropdown/dropdown.js b/src/dropdown/dropdown.js
@@ -112,22 +112,28 @@ angular.module('ui.bootstrap.dropdown', [])
         return;
       }
 
-      element.bind('click', function(event) {
+      var toggleDropdown = function(event) {
         event.preventDefault();
         event.stopPropagation();
 
-        if ( !element.hasClass('disabled') && !element.prop('disabled') ) {
+        if ( !element.hasClass('disabled') && !attrs.disabled ) {
           scope.$apply(function() {
             dropdownCtrl.toggle();
           });
         }
-      });
+      };
+
+      element.bind('click', toggleDropdown);
 
       // WAI-ARIA
       element.attr({ 'aria-haspopup': true, 'aria-expanded': false });
       scope.$watch(dropdownCtrl.isOpen, function( isOpen ) {
         element.attr('aria-expanded', !!isOpen);
       });
+
+      scope.$on('$destroy', function() {
+        element.unbind('click', toggleDropdown);
+      });
     }
   };
 });
diff --git a/src/dropdown/test/dropdown.spec.js b/src/dropdown/test/dropdown.spec.js
@@ -91,6 +91,35 @@ describe('dropdownToggle', function() {
       expect(elm.hasClass('open')).toBe(false);
     });
 
+    it('should not toggle if the element has `ng-disabled` as true', function() {
+      $rootScope.isdisabled = true;
+      var elm = $compile('<li class="dropdown"><div ng-disabled="isdisabled" dropdown-toggle></div><ul><li>Hello</li></ul></li>')($rootScope);
+      $rootScope.$digest();
+      elm.find('div').click();
+      expect(elm.hasClass('open')).toBe(false);
+
+      $rootScope.isdisabled = false;
+      $rootScope.$digest();
+      elm.find('div').click();
+      expect(elm.hasClass('open')).toBe(true);
+    });
+
+    it('should unbind events on scope destroy', function() {
+      var $scope = $rootScope.$new();
+      var elm = $compile('<li class="dropdown"><button ng-disabled="isdisabled" dropdown-toggle></button><ul><li>Hello</li></ul></li>')($scope);
+      $scope.$digest();
+
+      var buttonEl = elm.find('button');
+      buttonEl.click();
+      expect(elm.hasClass('open')).toBe(true);
+      buttonEl.click();
+      expect(elm.hasClass('open')).toBe(false);
+
+      $scope.$destroy();
+      buttonEl.click();
+      expect(elm.hasClass('open')).toBe(false);
+    });
+
     // issue 270
     it('executes other document click events normally', function() {
       var checkboxEl = $compile('<input type="checkbox" ng-click="clicked = true" />')($rootScope);
diff --git a/src/timepicker/docs/readme.md b/src/timepicker/docs/readme.md
@@ -31,3 +31,7 @@ All settings can be provided as attributes in the `<timepicker>` or globally con
  * `mousewheel`
  	_(Defaults: true)_ :
  	 Whether user can scroll inside the hours & minutes input to increase or decrease it's values.
+
+ * `showArrowControls`
+ 	_(Defaults: true)_ :
+ 	 Whether to show or hide the up and down control arrows.
diff --git a/src/timepicker/test/timepicker.spec.js b/src/timepicker/test/timepicker.spec.js
@@ -376,6 +376,11 @@ describe('timepicker directive', function () {
     expect(getModelState()).toEqual([14, 40]);
   });
 
+  it('displays arrows controls by default correctly', function () {
+    $rootScope.$digest();
+    expect(element.find('tr').length).toBe(3);
+  });
+
   describe('attributes', function () {
     beforeEach(function() {
       $rootScope.hstep = 2;
@@ -874,5 +879,36 @@ describe('timepicker directive', function () {
     });
   });
 
+  describe('setting timepickerConfig arrow controls check initial show', function () {
+
+    beforeEach(inject(function(_$compile_, _$rootScope_) {
+      $rootScope.showArrowsControls = true;
+      element = $compile('<timepicker ng-model="time" ng-required="true" show-arrows-controls="showArrowsControls"></timepicker>')($rootScope);
+      $rootScope.$digest();
+    }));
+
+    it('displays arrows controls correctly', function () {
+      $rootScope.$digest();
+      expect(element.find('tr').length).toBe(3);
+    });
+
+  });
+
+  describe('setting timepickerConfig arrow controls check initial hide', function () {
+
+    beforeEach(inject(function(_$compile_, _$rootScope_) {
+      $rootScope.showArrowsControls = false;
+      element = $compile('<timepicker ng-model="time" ng-required="true" show-arrows-controls="showArrowsControls"></timepicker>')($rootScope);
+      $rootScope.$digest();
+    }));
+
+    it('hides arrows controls correctly', function () {
+      $rootScope.$digest();
+      expect(element.find('tr').length).toBe(1);
+    });
+
+  });
+
 });
 
+
diff --git a/src/timepicker/timepicker.js b/src/timepicker/timepicker.js
@@ -6,7 +6,8 @@ angular.module('ui.bootstrap.timepicker', [])
   showMeridian: true,
   meridians: null,
   readonlyInput: false,
-  mousewheel: true
+  mousewheel: true,
+  showArrowsControls: true,
 })
 
 .controller('TimepickerController', ['$scope', '$attrs', '$parse', '$log', '$locale', 'timepickerConfig', function($scope, $attrs, $parse, $log, $locale, timepickerConfig) {
@@ -63,6 +64,9 @@ angular.module('ui.bootstrap.timepicker', [])
     });
   }
 
+  // Show / Hide arrows control
+  $scope.showArrowsControls = angular.isDefined($attrs.showArrowsControls) ? $scope.$parent.$eval($attrs.showArrowsControls) : timepickerConfig.showArrowsControls;
+
   // Get $scope.hours in 24H mode if valid
   function getHoursFromTemplate ( ) {
     var hours = parseInt( $scope.hours, 10 );
diff --git a/template/timepicker/timepicker.html b/template/timepicker/timepicker.html
@@ -1,6 +1,6 @@
 <table>
 	<tbody>
-		<tr class="text-center">
+		<tr class="text-center" ng-if="showArrowsControls">
 			<td><a ng-click="incrementHours()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
 			<td>&nbsp;</td>
 			<td><a ng-click="incrementMinutes()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
@@ -16,7 +16,7 @@
 			</td>
 			<td ng-show="showMeridian"><button type="button" class="btn btn-default text-center" ng-click="toggleMeridian()">{{meridian}}</button></td>
 		</tr>
-		<tr class="text-center">
+		<tr class="text-center" ng-if="showArrowsControls">
 			<td><a ng-click="decrementHours()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
 			<td>&nbsp;</td>
 			<td><a ng-click="decrementMinutes()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
