From fc073530be935b2815e0b416505ee3792be837a5 Mon Sep 17 00:00:00 2001 From: DevVersion Date: Fri, 26 Feb 2016 21:30:19 +0100 Subject: [PATCH] update(slider): improve disabled attribute validation Improved the `disabled` attribute validation by only observing the attribute instead of using a getter function - as same as done in the `autocomplete` Closes #7310 --- src/components/slider/slider.js | 33 ++++++++++------------------ src/components/slider/slider.spec.js | 4 ++++ 2 files changed, 15 insertions(+), 22 deletions(-) diff --git a/src/components/slider/slider.js b/src/components/slider/slider.js index 38eb51c57bd..fe965e69e84 100644 --- a/src/components/slider/slider.js +++ b/src/components/slider/slider.js @@ -96,12 +96,12 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi $viewChangeListeners: [] }; - var isDisabledGetter = angular.noop; - if (attr.disabled != null) { - isDisabledGetter = function() { return true; }; - } else if (attr.ngDisabled) { - isDisabledGetter = angular.bind(null, $parse(attr.ngDisabled), scope.$parent); - } + var isDisabled = false; + + attr.$observe('disabled', function (value) { + isDisabled = $mdUtil.parseAttributeBoolean(value, false); + updateAriaDisabled(); + }); var thumb = angular.element(element[0].querySelector('._md-thumb')); var thumbText = angular.element(element[0].querySelector('._md-thumb-text')); @@ -116,14 +116,6 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi angular.isDefined(attr.max) ? attr.$observe('max', updateMax) : updateMax(100); angular.isDefined(attr.step)? attr.$observe('step', updateStep) : updateStep(1); - // We have to manually stop the $watch on ngDisabled because it exists - // on the parent scope, and won't be automatically destroyed when - // the component is destroyed. - var stopDisabledWatch = angular.noop; - if (attr.ngDisabled) { - stopDisabledWatch = scope.$parent.$watch(attr.ngDisabled, updateAriaDisabled); - } - $mdGesture.register(element, 'drag'); element @@ -147,7 +139,6 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi scope.$on('$destroy', function() { angular.element($window).off('resize', debouncedUpdateAll); - stopDisabledWatch(); }); ngModelCtrl.$render = ngModelRender; @@ -175,7 +166,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi step = parseFloat(value); redrawTicks(); } - function updateAriaDisabled(isDisabled) { + function updateAriaDisabled() { element.attr('aria-disabled', !!isDisabled); } @@ -232,9 +223,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi * left/right arrow listener */ function keydownListener(ev) { - if(element[0].hasAttribute('disabled')) { - return; - } + if (isDisabled) return; var changeAmount; if (ev.keyCode === $mdConstant.KEY_CODE.LEFT_ARROW) { @@ -309,7 +298,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi var isDiscrete = angular.isDefined(attr.mdDiscrete); function onPressDown(ev) { - if (isDisabledGetter()) return; + if (isDisabled) return; element.addClass('_md-active'); element[0].focus(); @@ -323,7 +312,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi }); } function onPressUp(ev) { - if (isDisabledGetter()) return; + if (isDisabled) return; element.removeClass('_md-dragging _md-active'); @@ -335,7 +324,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi }); } function onDragStart(ev) { - if (isDisabledGetter()) return; + if (isDisabled) return; isDragging = true; ev.stopPropagation(); diff --git a/src/components/slider/slider.spec.js b/src/components/slider/slider.spec.js index e4951831d5b..0d596392bb5 100644 --- a/src/components/slider/slider.spec.js +++ b/src/components/slider/slider.spec.js @@ -183,6 +183,8 @@ describe('md-slider', function() { pageScope.isDisabled = true; var slider = setup('ng-disabled="isDisabled"'); + pageScope.$digest(); + // Doesn't add active class on pressdown when disabled slider.triggerHandler({ type: '$md.pressdown', @@ -202,6 +204,8 @@ describe('md-slider', function() { it('should disable via the `disabled` attribute', function() { var slider = setup('disabled'); + pageScope.$digest(); + // Check for disabled state by triggering the pressdown handler and asserting that // the slider is not active. slider.triggerHandler({