how to pass data from directive to app.config

Question

I have a directive widget and instead of setting theme statically in code, I wanna declare my theme color dynamically in this widget directive as with the attribute name theme and pass it to app.config to be able to set theme by using $mdThemingProvider. I have been searching for solution for 2 days now but I couldnt fix it. here is my codes

My directive code:

<script src="sedna-bonus-widget/widget-source.js" charset="utf-8">
</script>
<div id="sednabonuswidget">
  <div ng-controller="bonusWidgetController">
    <sedna-bonus-widget ng-model="Model" theme="c9a95a" ng-cloak> 
    </sedna-bonus-widget>
  </div>
</div>

my widget-directive.js:

var app = angular.module("bonusWidgetApp", ['ngMaterial']);

app.directive('sednaBonusWidget', function($http){
    return {
        restrict: 'E',
        //templateUrl: 'sedna-bonus-widget/widget-design.html',
        template: widgetDesignHtml,
        scope: {
            ngModel: '=',
            theme: '@'
        },
        link: function(scope){
            console.log(scope)
            scope.Model = {};
            scope.Model.hotels = [];
            scope.Model.RegisterMembership = {};
            scope.Model.ActivationMembership = {};
            scope.Model.LoginMembership = {};    
    }              
})

I have my theme here in scope.theme, so how to send this to app.config down below?

app.config(function($mdThemingProvider){
   
    $mdThemingProvider.definePalette('amazingDarkPaletteName', {
        '50': 'ffebee',
        '100': 'ffcdd2',
        '200': 'ef9a9a',
        '300': 'e57373',
        '400': 'ef5350',
        '500': 'c9a95a',  // I want here to be '500': config.theme
        '600': 'e53935',
        '700': 'd32f2f',
        '800': 'c62828',
        '900': '006064',
        'A100': 'ff8a80',
        'A200': 'ff5252',
        'A400': 'ff1744',
        'A700': 'd50000',
        // By default, text (contrast) on this palette should be white with 87% opacity.
        'contrastDefaultColor': 'light',
        // By default, for these lighter hues, text (contrast) should be 'dark'.
        'contrastDarkColors': '50 100 200 300 400 500 600 A100 A200 A400',
        // By default, for these darker hues, text (contrast) should be white with 100% opacity.
        'contrastStrongLightColors': '700 800 900 A700'
    })

    $mdThemingProvider.theme('default')
        .primaryPalette('amazingDarkPaletteName', {
            'default': '500'
    })
})

app.factory('sharedData', function () {
    var x = "";
    return {
        'getX': function () { return x; },
        'setX': function (newVal) { x = newVal; }
    }
});

Answer 1

With the AngularJS framework, directives can not and should not send data to .config functions.

The AngularJS operates in two phases: the .config phase and the .run phase. The bootstrap loader executes all the .config functions before it executes .run blocks and instantiates directives. Thus data acquired by directives can not change the configuration of the app.

For more information see,

• AngularJS Developer Guide - Module Dependencies and Order of Execution

---

AngularJS Material Dynamic Themes

The AngularJS Material Design framework provides a means to implement dynamic theming with the md-theme and md-theme-watch directives.

For more inforamtion, see

• AngularJS Material Design Developer Guide - Dynamic Themes