如何使用$ mdTheming将主题应用于自定义元素

下面是我在尝试 angular-material 的代码之后尝试使用的方法只是看看他们可能是怎么做到的导出函数ThemeDirective($ mdTheming){'ngInject';let指令= {限制:"A"，链接:(作用域，元素)=>{$ mdTheming(element);}};返回指令} 上面的代码似乎没有做任何事情.我确定我已经忽略了一些东西.需要帮助.解决方案这可能对您的研究有所帮助...您可以将其用于将主题应用于指令.我从链接 https://material.angularjs.org/latest/Theming/05_under_the_hood 进一步研究角度代码时，您会发现常量$ MD_THEME_CSS.基本上，这是一个css文件，其中包含每个指令的所有样式-但使用它们插入的标记进行格式化: ...md-input-container.md-THEME_NAME-theme .md-input {颜色:{{foreground-1}}；border-color:{{foreground-4}};文字阴影:{{foreground-shadow}}；}md-input-container.md-THEME_NAME-theme .md-input ::-webkit-input-placeholder，md-input-container.md-THEME_NAME-theme.md-input ::-moz-placeholder，md-input-container.md-THEME_NAME-theme .md-input:-moz-placeholder，md-input-container.md-THEME_NAME-theme.md-input:-ms-input-placeholder {颜色:{{foreground-3}}；}... 这些用颜色值替换的标签显示在mdThemingProvider的文档中... /*一些有效的主题表达式示例* =======================================*意图组扩展:(对主要，重音，警告，背景有效)* {{{primary-100}}-从主要调色板中抓取阴影100* {{primary-100-0.7}}-抓取阴影100，应用不透明度0.7* {{primary-100-contrast}}-抓取阴影100的对比色* {{primary-hue-1}}-从主调色板中获取分配给hue-1的阴影* {{{primary-hue-1-0.7}}-将0.7不透明度应用于primary-hue-1* {{primary-color}}-生成.md-hue-1，.md-hue-2，.md-hue-3，并为每个色调设置了已配置的阴影* {{primary-color-0.7}}-对上述每个规则应用0.7不透明度* {{primary-contrast}}-生成.md-hue-1，.md-hue-2，.md-hue-3，并为每个色调设置了已配置的对比度(即文本)颜色阴影* {{primary-contrast-0.7}}-对上述每个规则应用0.7不透明度**前景扩展:将rgba应用于黑白前景文本* {{foreground-1}}-用于主要文本* {{foreground-2}}-用于辅助文本/分隔符* {{foreground-3}}-用于禁用文本* {{foreground-4}}-用于分隔线*/ 在定义所有主题之后，然后在运行时通过generateAllThemes()格式化该字符串.这会将这些样式注入到< head>元素中-如您在chrome中检查页面所看到的:在此处输入图像描述现在我从来没有亲自做过此事，所以我不了解这里的标准，也找不到记录在案的标准.但是我假设您可以以某种方式调用GenerateTheme()来生成自己的样式以在html中使用...或者也许只是借用一些已经为核心代码生成的类.但是，我使用自己的服务而不是他们的服务做了类似的事情.这是我过去使用过的解决方案的一个可能的开始...在.config()中定义了主题之后，我编写了一个简单的提供程序来保存主题调色板.然后，我编写了一项服务，将主题颜色代码连接到实际的rgb颜色.希望它不是太hacky. (function(){var app = angular.module('MyApp'，['ngMaterial'，'ngMessages'])//提供程序...我将调色板存储在这里，因为在.config()期间服务不可用；.provider('colorPalette'，function colorPaletteProvider(){var _PALETTE = {};this.SetPalette = function(value){_PALETTE =值}this.$ get = [功能() {返回_PALETTE;}];}).config(function($ mdThemingProvider，colorPaletteProvider){var xoMap = $ mdThemingProvider.extendPalette('purple'，{'500':'833A96'});$ mdThemingProvider.definePalette('XO-Main'，xoMap);//添加几个主题$ mdThemingProvider.theme('默认').primaryPalette('XO-Main').accentPalette('pink'，{默认":"500"，"hue-1":"50"}).backgroundPalette('grey');$ mdThemingProvider.theme('order').primaryPalette('XO-Main').accentPalette('light-blue'，{默认":"500"，"hue-1":"50"});//保存调色板，以便以后查看colorPaletteProvider.SetPalette($ mdThemingProvider._PALETTES);}).run(function($ interpolate，themeColorsService){//在头部注入一些样式var orderTheme = themeColorsService.GetColors("order");var myStyle = $ interpolate(.nav-icon-order {color:{{accent.default.bg}};}")(orderTheme);console.debug(myStyle);themeColorsService.AddStyle(myStyle);themeColorsService.AddStyle($ interpolate("md-toolbar.hpbx-toolbar-accent-order，.panel-heading.hpbx-toolbar-accent-order {border-bottom:5px solid {{accent.default.bg}};}")(orderTheme))；});//控制器app.controller("AppCtrl"，function($ scope，themeColorsService){$ scope.themeColors = themeColorsService.GetColors("default");});})();//传入主题的示例指令angular.module('MyApp').directive('theme'，function(themeColorsService){返回 {限制:"A"，包含:是的，模板:< div ng-style ='{color:themeColors.primary.default.bg}'ng-transclude></div>"，范围: {themeName:"=}，控制器:功能($ scope，$ element，$ attrs){$ scope.themeColors = themeColorsService.GetColors("default");}}});//服务angular.module('MyApp').service("themeColorsService"，function(colorPalette，$ mdTheming){this.themes = {};//将颜色代码与调色板绑定在一起this.GetColors = function(theme){var returnVal = {};如果(！this.themes.hasOwnProperty(theme)){主题= $ mdTheming.THEMES [theme];_.keys(theme.colors).forEach(function(key){returnVal [key] = {};varpalette = theme.colors [key] .name;如果(！_.isUndefined(palette)){_.keys(theme.colors [key] .hues).forEach(function(hue){var c = theme.colors [key] .hues [hue];var p = colorPalette [palette] [c];returnVal [key] [hue] = {};returnVal [key] [hue] .bg = getRGB(p.value);returnVal [key] [hue] .fg = getRGB(p.contrast);});}});this.themes [theme] = _.cloneDeep(returnVal);}返回this.themes [theme];};var getRGB = function(value){var returnVal =";如果(value.length == 4){returnVal ="rgba(" + value [0] +，" + value [1] +，" + value [2] +，" + value [3] +)";} else if(value.length == 3){returnVal ="rgb(" + value [0] +，" + value [1] +，" + value [2] +)";}return returnVal;};//将样式插入head元素this.AddStyle = function(styleContent){var head = document.head;var firstChild =头?head.firstElementChild:null;var style = document.createElement('style');style.setAttribute('xo-theme-style'，'');style.appendChild(document.createTextNode(styleContent));head.insertBefore(style，firstChild);};}); < script src ="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js></script>< script src ="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>< script src ="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>< script src ="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>< script src ="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>< script src ="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>< script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>< script src ="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>< script src ="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.js"></script>< link href ="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.css" rel ="stylesheet"/>< html ng-app ="MyApp"><身体>< div ng-controller ="AppCtrl">< div>我没有样式</div><！-使用ng-style的样式->< div ng-style ="{color:themeColors.primary.default.bg}">我使用ngStyle</div <！-使用注入的CSS样式->< div class ="nav-icon-order">我正在使用注入的CSS类</div><！-按照您在示例中列出的方式将其发送到指令->< div主题>这是样式化的指令</div><！-显示themeColors对象->< pre> themeColors:{{themeColors |json}}</pre></div></body></html> I've been trying to figure out a way to use $mdTheming service provided by angular-material library to apply theme configured through $mdThemingProvider.In Simpler terms:Consider an element<div class="md-primary" theme></div>The theme directive in this case has to inject the primary color configure to the theme.Below is the approach I tried to use, after going through angular-material's codeJust to see how they might have done itexport function ThemeDirective($mdTheming) { 'ngInject'; let directive = { restrict: 'A', link: (scope, element) => { $mdTheming(element); } }; return directive}The above code doesn't seem to be doing anything. I'm sure I've overlooked something. Need help. 解决方案 This may help in your research... you can use it towards applying a theme to your directive. I started with the link https://material.angularjs.org/latest/Theming/05_under_the_hoodWhen you look further into the angular code, you'll find the constant $MD_THEME_CSS. This is basically a css file with all the styles for each of their directives - but it is formatted with tags that they interpolate: ... md-input-container.md-THEME_NAME-theme .md-input { color: {{foreground-1}}; border-color: {{foreground-4}}; text-shadow: {{foreground-shadow}}; } md-input-container.md-THEME_NAME-theme .md-input::-webkit-input-placeholder,md-input-container.md-THEME_NAME-theme .md-input::-moz-placeholder,md-input-container.md-THEME_NAME-theme .md-input:-moz-placeholder,md-input-container.md-THEME_NAME-theme .md-input:-ms-input-placeholder { color: {{foreground-3}}; } ...These tags they replace with color values are shown in the documentation of the mdThemingProvider... /* Some Example Valid Theming Expressions * ======================================= * Intention group expansion: (valid for primary, accent, warn, background) * {{primary-100}} - grab shade 100 from the primary palette * {{primary-100-0.7}} - grab shade 100, apply opacity of 0.7 * {{primary-100-contrast}} - grab shade 100's contrast color * {{primary-hue-1}} - grab the shade assigned to hue-1 from the primary palette * {{primary-hue-1-0.7}} - apply 0.7 opacity to primary-hue-1 * {{primary-color}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured shades set for each hue * {{primary-color-0.7}} - Apply 0.7 opacity to each of the above rules * {{primary-contrast}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured contrast (ie. text) color shades set for each hue * {{primary-contrast-0.7}} - Apply 0.7 opacity to each of the above rules * * Foreground expansion: Applies rgba to black/white foreground text * {{foreground-1}} - used for primary text * {{foreground-2}} - used for secondary text/divider * {{foreground-3}} - used for disabled text * {{foreground-4}} - used for dividers */This string is then formatted at run time by generateAllThemes() after all the themes have been defined. This will inject these styles into the <head> element - as you can see by inspecting your page in chrome:enter image description hereNow I've never done this before personally so i don't know the standards here, and cannot find it documented. But I'm assuming you can call GenerateTheme() somehow to generate your own styles to use in your html... or maybe just borrow some classes that have already been generated for the core code.I have however done something similar using my own services rather than theirs.Here's a possible start to your solution that I've used in the past... I wrote a simple provider to save my theme palette after i've defined the theme in my .config(). Then i wrote a service to connect the theme color codes to the actual rgb colors. Hopefully it's not too hacky.(function() { var app = angular.module('MyApp', ['ngMaterial', 'ngMessages']) // The provider... I store the color palette here since a service isn't available during .config(); .provider('colorPalette', function colorPaletteProvider() { var _PALETTE = {}; this.SetPalette = function(value) { _PALETTE = value } this.$get = [ function() { return _PALETTE; } ]; }) .config(function($mdThemingProvider, colorPaletteProvider) { var xoMap = $mdThemingProvider.extendPalette('purple', { '500': '833A96' }); $mdThemingProvider.definePalette('XO-Main', xoMap); // add a couple of themes $mdThemingProvider.theme('default') .primaryPalette('XO-Main') .accentPalette('pink', { "default": "500", "hue-1": "50" }) .backgroundPalette('grey'); $mdThemingProvider.theme('order') .primaryPalette('XO-Main') .accentPalette('light-blue', { "default": "500", "hue-1": "50" }); // save the palette so i can see it later colorPaletteProvider.SetPalette($mdThemingProvider._PALETTES); }) .run(function($interpolate, themeColorsService) { // inject some styles into the head var orderTheme = themeColorsService.GetColors("order"); var myStyle = $interpolate(".nav-icon-order {color: {{accent.default.bg}};}")(orderTheme); console.debug(myStyle); themeColorsService.AddStyle(myStyle); themeColorsService.AddStyle($interpolate("md-toolbar.hpbx-toolbar-accent-order, .panel-heading.hpbx-toolbar-accent-order { border-bottom: 5px solid {{accent.default.bg}};}")(orderTheme)); }); // The controller app.controller("AppCtrl", function($scope, themeColorsService) { $scope.themeColors = themeColorsService.GetColors("default"); });})();// example directive where the theme is passed inangular.module('MyApp').directive('theme', function (themeColorsService) { return { restrict: "A", transclude: true, template: "<div ng-style='{color: themeColors.primary.default.bg}' ng-transclude></div>", scope: { themeName: "=" }, controller: function ($scope, $element, $attrs) { $scope.themeColors = themeColorsService.GetColors("default"); } } });// The serviceangular.module('MyApp').service("themeColorsService", function(colorPalette, $mdTheming) { this.themes = {}; // tie the color codes together with the palettes this.GetColors = function(theme) { var returnVal = {}; if (!this.themes.hasOwnProperty(theme)) { theme = $mdTheming.THEMES[theme]; _.keys(theme.colors).forEach(function(key) { returnVal[key] = {}; var palette = theme.colors[key].name; if (!_.isUndefined(palette)) { _.keys(theme.colors[key].hues).forEach(function(hue) { var c = theme.colors[key].hues[hue]; var p = colorPalette[palette][c]; returnVal[key][hue] = {}; returnVal[key][hue].bg = getRGB(p.value); returnVal[key][hue].fg = getRGB(p.contrast); }); } }); this.themes[theme] = _.cloneDeep(returnVal); } return this.themes[theme]; }; var getRGB = function(value) { var returnVal = ""; if (value.length == 4) { returnVal = "rgba(" + value[0] + "," + value[1] + "," + value[2] + "," + value[3] + ")"; } else if (value.length == 3) { returnVal = "rgb(" + value[0] + "," + value[1] + "," + value[2] + ")"; } return returnVal; }; // insert a style into the head element this.AddStyle = function(styleContent) { var head = document.head; var firstChild = head ? head.firstElementChild : null; var style = document.createElement('style'); style.setAttribute('xo-theme-style', ''); style.appendChild(document.createTextNode(styleContent)); head.insertBefore(style, firstChild); };});<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.css" rel="stylesheet" /><html ng-app="MyApp"><body> <div ng-controller="AppCtrl"> <div>I'm unstyled</div>  <div ng-style="{color: themeColors.primary.default.bg}">I'm styled with ngStyle</div>  <div class="nav-icon-order">I'm using an injected css class</div>  <div theme>This is a styled directive</div>  <pre>themeColors:{{themeColors | json}}</pre> </div></body></html> 这篇关于如何使用$ mdTheming将主题应用于自定义元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！