AngularJS Material插入多个(大约30个)带有md-theme-style
属性的样式标签。我猜这是一种性能调优,但我宁愿自己来做 - 我不需要外部框架以这种令人讨厌的方式污染我的HTML。你有什么想法如何摆脱这些样式标签吗?
AngularJS Material插入多个(大约30个)带有md-theme-style
属性的样式标签。我猜这是一种性能调优,但我宁愿自己来做 - 我不需要外部框架以这种令人讨厌的方式污染我的HTML。你有什么想法如何摆脱这些样式标签吗?
angular-material.js
中查看此代码,从底部开始,从以下行开始:angular.module("material.core").constant("$MD_THEME_CSS"...
git clone https://github.com/angular/material.git
然后安装依赖项:
cd material
npm install
53
行改为:var jsProcess = series(jsBuildStream, themeBuildStream() )
要成为:
var jsProcess = series(jsBuildStream)
然后运行构建过程:
gulp build
延迟生成主题
默认情况下,每个主题在定义时都会被生成。您可以在配置部分使用$mdThemingProvider
禁用此功能。
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
//disable theme generation
$mdThemingProvider.generateThemesOnDemand(true);
});
这是我使用的确切语法,它像冠军一样工作。重要的是要注意,这并没有破坏我们的任何样式:
.config(['$mdThemingProvider', function($mdThemingProvider) {
$mdThemingProvider.generateThemesOnDemand(true);
}])
了解这一点似乎对Angular技术很有用。我也需要降低动画效果,因为默认设置会对几乎所有东西进行动画处理。
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
但比以前少得多,谢谢! - alistaircol我不确定这个回答是否正确,但是为了完全删除页面顶部的所有<style/>
元素,我采取了以下步骤:
angular.module( 'myApp', ['ngMaterial'] )
.config( function( $mdThemingProvider, $provide ) {
$mdThemingProvider.theme('myTheme')
.primaryPalette('blue')
.accentPalette('green')
.warnPalette('yellow');
$mdThemingProvider.generateThemesOnDemand(true);
$provide.value('themingProvider', $mdThemingProvider);
});
这样就成功地删除了所有元素。
现在,当我想要它们生成时,我在主控制器中调用它:
angular.module('myApp').controller('MyCtrl', function( themingProvider ){
themingProvider.reload('myTheme');
// pretty sure it's themingProvider.generateTheme('myTheme')
// but I ended up refactoring this workaround out, anyway.
});
答案基于这个问题。