diff --git a/app/pages/home/home.controller.js b/app/pages/home/home.controller.js
index ca9f99c..1350484 100644
--- a/app/pages/home/home.controller.js
+++ b/app/pages/home/home.controller.js
@@ -12,4 +12,6 @@ function HomeController($scope, $mdExpansionPanel) {
$scope.collapseOne = function () {
$mdExpansionPanel('expansionPanelOne').collapse();
};
+
+ $scope.isDisabled = true;
}
diff --git a/app/pages/home/home.html b/app/pages/home/home.html
index 7f2e8fc..70c4ccc 100644
--- a/app/pages/home/home.html
+++ b/app/pages/home/home.html
@@ -150,3 +150,35 @@
Content
+
+
+
+
+
+
+ Disabled Panel
+
+
+
+
+
+
+
+ Disabled Panel
+ Expanded Summary
+
+
+
+
+ Content
+ Put content in here
+
+
+
+
+ Collapse
+
+
+
+
+
diff --git a/karma.conf.js b/karma.conf.js
index 149c81c..7ff36af 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -29,7 +29,7 @@ module.exports = function(config) {
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
- reporters: [ 'spec'],
+ reporters: [ 'progress'],
// web server port
diff --git a/src/expansionPanels-theme.scss b/src/expansionPanels-theme.scss
index a8e4504..22afe57 100644
--- a/src/expansionPanels-theme.scss
+++ b/src/expansionPanels-theme.scss
@@ -25,7 +25,14 @@ md-expansion-panel {
&[disabled] {
md-expansion-panel-collapsed {
- color: #DDD;
+ .md-title,
+ .md-summary {
+ color: #DDD;
+ }
+ }
+
+ .md-expansion-panel-icon svg {
+ fill: #DDD;
}
}
diff --git a/src/expansionPanels.spec.js b/src/expansionPanels.spec.js
index bd2c846..0ad3655 100644
--- a/src/expansionPanels.spec.js
+++ b/src/expansionPanels.spec.js
@@ -429,6 +429,28 @@ describe('material.components.expansionPanels', function () {
});
+ it('should set `tabindex` to `-1` if `ng-disabled` is true', function () {
+ var element = getDirective({ngDisabled: 'isDisabled'});
+ scope.isDisabled = true;
+ scope.$digest();
+ expect(element.attr('tabindex')).toEqual('-1');
+ });
+
+ it('should set `tabindex` to `0` if `ng-disabled` is false', function () {
+ var element = getDirective({ngDisabled: 'isDisabled'});
+ scope.isDisabled = false;
+ scope.$digest();
+ expect(element.attr('tabindex')).toEqual('0');
+ });
+
+ it('should set `tabindex` to `0` if `ng-disabled` is not set', function () {
+ var element = getDirective({ngDisabled: 'isDisabled'});
+ scope.isDisabled = undefined;
+ scope.$digest();
+ expect(element.attr('tabindex')).toEqual('0');
+ });
+
+
it('should thow errors on invalid markup', inject(function($compile, $rootScope) {
function buildBadPanelOne() {
$compile('')($rootScope);
@@ -851,7 +873,7 @@ describe('material.components.expansionPanels', function () {
options = options || {};
return $mdUtil.supplant('{2}' +
- ''+
+ ''+
'>'+
'Title
'+
'Summary
'+
@@ -878,7 +900,8 @@ describe('material.components.expansionPanels', function () {
options.content ? '' : '',
options.headerNoStick ? ' md-no-sticky ' : '',
options.footerNoStick ? ' md-no-sticky ' : '',
- options.componentId ? ' md-component-id="'+options.componentId+'" ' : ''
+ options.componentId ? ' md-component-id="'+options.componentId+'" ' : '',
+ options.ngDisabled ? ' ng-disabled="'+options.ngDisabled+'" ' : ''
]);
}
diff --git a/src/js/expansionPanel.directive.js b/src/js/expansionPanel.directive.js
index 9d429cc..7b0858b 100644
--- a/src/js/expansionPanel.directive.js
+++ b/src/js/expansionPanel.directive.js
@@ -102,15 +102,15 @@ function expansionPanelDirective() {
vm.onRemove = onRemove;
vm.init = init;
- $attrs.$observe('disabled', function(disabled) {
- isDisabled = (typeof disabled === 'string' && disabled !== 'false') ? true : false;
-
- if (isDisabled === true) {
- $element.attr('tabindex', '-1');
- } else {
- $element.attr('tabindex', '0');
- }
- });
+ if ($attrs.ngDisabled !== undefined) {
+ $scope.$watch($attrs.ngDisabled, function(value) {
+ isDisabled = value;
+ $element.attr('tabindex', isDisabled ? -1 : 0);
+ });
+ } else if ($attrs.disabled !== undefined) {
+ isDisabled = ($attrs.disabled !== undefined && $attrs.disabled !== 'false' && $attrs.disabled !== false);
+ $element.attr('tabindex', isDisabled ? -1 : 0);
+ }
$element
.on('focus', function (ev) {