如何将数据从指令传递到 app.config

Question

我有一个指令小部件，而不是在代码中静态设置主题，我想在这个小部件指令中动态声明我的主题颜色，就像属性名称主题一样，并将其传递给app.config以便能够使用$mdThemingProvider设置主题。 我一直在寻找解决方案 2 天，但我无法解决它。 这是我的代码

我的指令代码：

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

我的小部件-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 = {};    
    }              
})

我在scope.theme中有我的主题，那么如何将它发送到下面的app.config呢？

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

使用 AngularJS 框架，指令不能也不应该将数据发送到.config函数。

AngularJS 分两个阶段运行： .config阶段和.run阶段。 引导加载程序在执行.run块和实例化指令之前执行所有.config函数。 因此指令获取的数据不能改变应用程序的配置。

有关更多信息，请参阅，

• AngularJS 开发者指南 - 模块依赖和执行顺序

---

AngularJS 材质动态主题

AngularJS Material Design 框架提供了一种使用md-theme和md-theme-watch指令实现动态主题化的方法。

有关详细信息，请参阅

• AngularJS Material Design 开发人员指南 - 动态主题