Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 49593c8

Browse files
Cody Mikolcodymikol
Cody Mikol
authored andcommitted
fix(dialog): md-colors breaks inside of dialogs
Only append an md-theme attribute if the md-dialog is propagated from an element that contains an md-theme. Fixes #10276
1 parent cc73422 commit 49593c8

File tree

2 files changed

+58
-2
lines changed

2 files changed

+58
-2
lines changed

src/components/dialog/dialog.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -693,7 +693,8 @@ function MdDialogProvider($$interimElementProvider) {
693693
var startSymbol = $interpolate.startSymbol();
694694
var endSymbol = $interpolate.endSymbol();
695695
var theme = startSymbol + (options.themeWatch ? '' : '::') + 'theme' + endSymbol;
696-
return '<div class="md-dialog-container" tabindex="-1" md-theme="' + theme + '">' + validatedTemplate(template) + '</div>';
696+
var themeAttr = (options.hasTheme) ? 'md-theme="'+theme+'"': '';
697+
return '<div class="md-dialog-container" tabindex="-1" ' + themeAttr + '>' + validatedTemplate(template) + '</div>';
697698

698699
/**
699700
* The specified template should contain a <md-dialog> wrapper element....
@@ -854,7 +855,9 @@ function MdDialogProvider($$interimElementProvider) {
854855

855856
var themeCtrl = targetEl && targetEl.controller('mdTheme');
856857

857-
if (!themeCtrl) {
858+
options.hasTheme = (!!themeCtrl);
859+
860+
if (!options.hasTheme) {
858861
return;
859862
}
860863

src/components/dialog/dialog.spec.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1774,6 +1774,59 @@ describe('$mdDialog', function() {
17741774
});
17751775

17761776
describe('theming', function () {
1777+
1778+
it('should inherit md-theme if the child has a md-theme to inherit',
1779+
inject(function ($mdDialog, $mdTheming, $rootScope, $compile) {
1780+
1781+
var template = '<div id="rawContent">Hello</div>';
1782+
var parent = angular.element('<div>');
1783+
1784+
var button = $compile(
1785+
'<button ng-click="showDialog($event)" md-theme="coolTheme">test</button>'
1786+
)($rootScope);
1787+
1788+
$mdTheming(button);
1789+
1790+
$rootScope.showDialog = function (ev) {
1791+
$mdDialog.show({
1792+
template: template,
1793+
parent: parent,
1794+
targetEvent: ev
1795+
});
1796+
};
1797+
1798+
button[0].click();
1799+
1800+
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
1801+
1802+
expect(container.attr('md-theme')).toEqual('coolTheme');
1803+
}));
1804+
1805+
it('should not set md-theme if the child does not have md-theme to inherit',
1806+
inject(function ($mdDialog, $mdTheming, $rootScope, $compile) {
1807+
1808+
var template = '<div id="rawContent">Hello</div>';
1809+
var parent = angular.element('<div>');
1810+
1811+
var button = $compile('<button ng-click="showDialog($event)">test</button>')($rootScope);
1812+
1813+
$mdTheming(button);
1814+
1815+
$rootScope.showDialog = function (ev) {
1816+
$mdDialog.show({
1817+
template: template,
1818+
parent: parent,
1819+
targetEvent: ev
1820+
});
1821+
};
1822+
1823+
button[0].click();
1824+
1825+
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
1826+
1827+
expect(container.attr('md-theme')).toBeUndefined();
1828+
}));
1829+
17771830
it('should inherit targetElement theme', inject(function($mdDialog, $mdTheming, $rootScope, $compile) {
17781831
var template = '<div id="rawContent">Hello</div>';
17791832
var parent = angular.element('<div>');

0 commit comments

Comments
 (0)