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

.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。

但這樣做很累,對吧。

所以 最好是選一個主題之後,新視窗開啟預覽。
或 有個單獨設定主題的頁面,列出所有主題的樣子。 供選擇就好。畢竟在原網站上預覽介面是個很煩的事情。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板