如何在angular配置中使用變量

Question

我正試圖在我的角度代碼的配置中動態設置Angular MD主題的顏色。 但我似乎無法改變它...我希望primaryPalette在由themeChangerAdjustment觸發器更改時更改為變量顏色。

var color = red;

angular.module('myApp', ['ngResource', 'ui.router', 'ui.bootstrap', 'ngMaterial'])
.config(['$mdThemingProvider', function($mdThemingProvider) {
    $mdThemingProvider.theme('default').primaryPalette(color).accentPalette('orange');
}])

.run(['$log','$rootScope', 'themeChangerService', function($log,$rootScope, themeChangerService){
    $rootScope.$on('themeChangerAdjustment', function(){
        alert(themeChangerService.themes.color);
        color = themeChangerService.themes.color; //works
    });
    themeChangerService.prepForAdjustment(1);
}]);

Answer 1

您可以聲明可在配置塊中訪問的提供程序， 請參閱doc

angular.module('myApp', ['ngResource', 'ui.router', 'ui.bootstrap', 'ngMaterial'])
    .provider('color', function(){
        var color = 'red'
        return {
            value : color,
            $get : function(){
                return {
                    value : color
                };
            }
        };
    })
    .config(function(colorProvider){
        console.log('color in config :',colorProvider.value);
        //you config here
    })
    .controller('myCtrl',function(color){
        console.log('color in ctrl :', color.value);
    });

在這里看JSFiddle演示