angular.js - $mdThemingProvider 不能在controller中使用吗
高洛峰
高洛峰 2017-05-15 16:56:08
0
2
788

.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某个变量 来改变主题吗?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(2)
给我你的怀抱

参考问题
刚才看了下最新的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);
}
曾经蜡笔没有小新

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。

但这样做很累,对吧。

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板