angular.module('app',[
'ngAnimate',
'ngAria',
'ngMaterial'
])
.provider('__CONFIG', function() {
var config = this;
//Config manipulations
(function(){
config.themeselect = [
{name: 'Blue', value: 'blue'},
{name: 'Light Blue', value: 'light-blue'},
{name: 'Indigo', value: 'indigo'},
{name: 'Pink', value: 'pink'},
{name: 'Teal', value: 'teal'},
{name: 'Lime', value: 'lime'},
];
config.themes_primary = 'indigo';
config.themes_accent = 'pink';
})()
return {
//This will be seen by the config function
primary:function(){return config.themes_primary;},
accent:function(){return config.themes_accent;},
//Get is being seen by controllers
$get: function(){
return {
primary: function(){
return config.themes_primary;
},
accent: function(){
return config.themes_accent;
},
themeselect:config.themeselect
}
}
};
})
.controller('Themes', function(__CONFIG){
var vm = this;
vm.themeselect = __CONFIG.themeselect;
})
.config(['$mdThemingProvider','__CONFIGProvider', function ($mdThemingProvider, __CONFIGProvider) {
'use strict';
var primary = __CONFIGProvider.primary(),
accent = __CONFIGProvider.accent();
console.log(primary);
$mdThemingProvider.theme('default')
.primaryPalette(primary)
.accentPalette(accent);
$mdThemingProvider.alwaysWatchTheme(true);
}])
<script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular-animate.js" data-semver="1.4.3" data-require="angular-animate@1.4.3"></script>
<script data-require="angular-aria@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.1/angular-material.min.js" data-semver="0.10.1" data-require="angular-material@*"></script>
<script src="script.js"></script>
<div layout="column" layout-fill>
<md-toolbar class="md-primary">
<div class="md-toolbar-tools admin-toolbar-tools" ng-click="openMenu()" tabIndex="-1">
<div layout="row" flex class="fill-height">
<h2 class="md-title">Themes</h2>
</div>
</div>
</md-toolbar>
<md-content ng-controller="Themes as vm" layout-padding>
<md-input-container class="md-accent">
<label>Selecione o Tema Primário</label>
<md-select name="themes_primary" ng-model="themes_primary" placeholder="Selecione o Tema Primário" class="md-accent">
<md-option ng-repeat="theme in vm.themeselect" value="{{theme.value}}" class="md-accent" md-theme-watch>{{theme.name}}</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-accent">
<label>Selecione o Tema Primário</label>
<md-select name="themes_accent" ng-model="themes_accent" placeholder="Selecione o Tema Accent" class="md-accent">
<md-option ng-repeat="theme in vm.themeselect" value="{{theme.value}}" class="md-accent" md-theme-watch>{{theme.name}}</md-option>
</md-select>
</md-input-container>
<md-button class="md-raised md-accent">Theme Apply</md-button>
<md-button class="md-raised">CANCEL</md-button>
</md-content>
</div>