$mdThemingProvider 不能在controller中使用吗

发布于 2022-09-01 18:49:32 字数 1268 浏览 16 评论 0

.config(CoreTheme)

function CoreTheme($mdThemingProvider) {
    $mdThemingProvider.theme('default')
        .primaryPalette('blue',{
            'default'   :   '500',
            'hue-1'     :   '900',
            'hue-2'     :   'A100',
            'hue-3'     :   '400'
        })
        .accentPalette('green',{
            'default'   :   '600',
            'hue-1'     :   '900',
            'hue-2'     :   'A100',
            'hue-3'     :   '400'
        })
        .warnPalette('deep-orange',{
            'default'   :   '500',
        });
    $mdThemingProvider.alwaysWatchTheme(true)
}

CoreTheme.$inject = ['$mdThemingProvider'];

export default CoreTheme;

module.js

export default angular.module('theme',['ngMaterial']);

controller.js

class ThemeCtrl{
    constructor($scope,$rootScope,$mdThemingProvider){
   
        $scope.changeTheme = changeTheme;


        function changeTheme(theme_name){
            $mdThemingProvider.theme('default').dark()
        }
    }
}

ThemeCtrl.$inject = ['$scope','$rootScope','$mdThemingProvider'];

export default ThemeCtrl;

我想在这个控制器中 动态改变主题样式 可是注入这个Provider报错!应该怎么做?
我能想到的是(1)可以在.config()中$watch某个变量 来改变主题吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

Bonjour°[大白 2022-09-08 18:49:33

参考问题
刚才看了下最新的material源码,貌似没有reload这个函数,如果要使用下面的方法还是需要修改material的源码。如果不改源码的话,请忽略这个答案。

可以按如下步骤尝试下:
1.按照参考问题里面的答案修改material的源码

2.在configure阶段,注册$mdThemingProvider供controller使用

angular.module("yourModule",['whateverDependencies']).config(
function($provide, $mdThemingProvider) { 
    $provide.value('themeProvider', $mdThemingProvider); 
})

3.在controller中重新加载theme

.controller('someController', function(themeProvider, $injector) {         
  themeProvider.theme('default').dark();
  themeProvider.reload($injector);
}
内心旳酸楚 2022-09-08 18:49:33

Configuring of the default theme is done by using the $mdThemingProvider during application configuration.
官网说了,请在configuration配置。

angular material 在生成页面的时候已经 给好主题了。 比如 md-button 生成之后 是 md-button md-default-theme 。 如果要修改主题的话可以遍历页面 md-default-theme 替换成你想要的主题 md-dark-theme。

但这样做很累,对吧。

所以 最好是选一个主题之后,新窗口打开预览。
或者 有个单独设置主题的页面,列出所有主题的样子。 供选择就好。毕竟在原有网站上预览界面是个很烦的事情。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文