Angularjs 以角度动态加载材质主题

我正在使用Angular材质构建一个Angular应用程序。应用程序中的第一个步骤之一是用户登录。接下来，系统从后端加载该用户公司制作的主题

但是，当后端响应主题信息时，我无法将其放入系统。$mdThemingProvider（允许您设置主题）似乎无法从控制器内部使用，$mdTheming服务本身没有用于修改系统中主题的选项

---

有没有办法将新主题动态加载到Angular Material应用程序中？

我通过对提供程序进行一些小的更改来解决这个问题。要允许更改主题，请执行以下操作：

首先，修改angular-material.js中的GenerateTimes函数，将GenerationsDone设置为false

这将允许您在以后重新生成主题

function generateThemes($injector) {
    var styles = $injector.has('$MD_THEME_STYLESHEETS') ? $injector.get('$MD_THEME_STYLESHEETS') : [];
    if (styles) {
        var $q = $injector.get('$q');
        var $http = $injector.get('$http');
        var calls = [];

        angular.forEach(styles, function(style){
            calls.push($http.get(style));
        });

        $q.all(calls).then(function(responses) {
            var css = '';
            angular.forEach(responses, function(response) {
                css += response.data;
            });
            generationIsDone = false; // here
            generateCss(css);
        });
    } else {
        var css = $injector.has('$MD_THEME_CSS') ? $injector.get('$MD_THEME_CSS') : '';
        generationIsDone = false; // here 
        generateCss(css);
    }
}

其次，使generateThemes（）函数作为ThemingService的属性可用

您可以在添加新主题时调用它，以生成它们的CSS

  ThemingService.$inject = ["$rootScope"];
  return themingProvider = {
    definePalette: definePalette,
    extendPalette: extendPalette,
    theme: registerTheme,

    setDefaultTheme: function(theme) {
      defaultTheme = theme;
    },
    alwaysWatchTheme: function(alwaysWatch) {
      alwaysWatchTheme = alwaysWatch;
    },
    reload: generateThemes, // here
    $get: ThemingService,
    _LIGHT_DEFAULT_HUES: LIGHT_DEFAULT_HUES,
    _DARK_DEFAULT_HUES: DARK_DEFAULT_HUES,
    _PALETTES: PALETTES,
    _THEMES: THEMES,
    _parseRules: parseRules,
    _rgba: rgba
  };

第三，要使主题提供程序对控制器可用，请将其作为值添加到模块中

angular.module（“yourModule”，“WhateVerdependences]”） .config（函数（$provide，$mdThemingProvider）{ $provide.value（'themeProvider'，$mdThemingProvider）；//现在可以注入提供程序 })

最后，在需要的地方，只需调用控制器中的值：

}).controller('someController', function(themeProvider, $injector) {         

 themeProvider.theme('someNewTheme').primaryColor('orange').accentColor('pink');
  themeProvider.reload($injector);
}

---

现在容易多了。你只需要省略第一步。在简历中：

添加

reload:generateThemes

在

themingProvider

函数（angular material.js）中

使提供程序对控制器可用：

}).controller('someController', function(themeProvider, $injector) {         

 themeProvider.theme('someNewTheme').primaryColor('orange').accentColor('pink');
  themeProvider.reload($injector);
}

$provide.value（'themeProvider'，$mdThemingProvider）

使用themeProvider在控制器中创建主题

使用

themeProvider.Reload（$injector）重新加载主题

---

从角度材质的1.0.5版开始：

加

reload: generateTheme 

在themingProvider函数中（angular-material.js第4840行-GenerateTime函数已经存在于angular-material.js中，我们只需要一种调用它的方法）

在配置函数中：

angular.module('my-module').config(function ($provide, $mdThemingProvider) {
 $mdThemingProvider.generateThemesOnDemand(true);
 $provide.value('themeProvider', $mdThemingProvider);});

在控制器中，插入EProvider，现在可以执行以下操作：

//create new theme
themeProvider.theme('custom')
  .primaryPalette('pink')
  .accentPalette('orange')
  .backgroundPalette('yellow');

//reload the theme
themeProvider.reload('custom');

//optional - set the default to this new theme
themeProvider.setDefaultTheme('custom');

---

下面的代码对我来说很有用，但我会从中添加代码，以防谷歌把其他人带到这里

angular.module('app')
.config(['$mdThemingProvider', '$provide', function($mdThemingProvider, $provide) {
    $mdThemingProvider.generateThemesOnDemand(true);
    $provide.value('themeProvider', $mdThemingProvider);
}])

.controller('AppController', ['themeProvider', '$mdTheming', function(themeProvider, $mdTheming) {
    //create new theme
    themeProvider.theme('default')
      .primaryPalette('pink')
      .accentPalette('orange')
      .backgroundPalette('yellow');

    //reload the theme
    $mdTheming.generateTheme('default');

    //optional - set the default to this new theme
    themeProvider.setDefaultTheme('default');
}]);

为避免“试图使用未注册主题”警告，应将主题添加到mdTheming内部主题列表中

var theme = themeProvider.theme...
$mdTheming.THEMES[themeName] = theme;

如果希望此主题成为默认主题，则：

$mdThemingProvider.setDefaultTheme(<theme_name>);

$mdThemingProvider.setDefaultTheme（）；

或者在HTML中使用

md-theme=”“

---

PS：适用于Angular Material 1.1及以上版本。

我也有类似的场景，CSS为我们提供了一个名为var（）的功能，允许我们在运行时更改CSS元素的属性。

---

查看我的博客了解更多详细信息，希望这能帮助您

似乎angular-md.js有了新版本，现在似乎无法正常工作。重新加载功能不存在：/I我只想知道是否要更改primaryPalette我需要用新名称创建主题吗？因为相同的名字不起作用。

$mdThemingProvider.setDefaultTheme(<theme_name>);