如何將數據從指令傳遞到 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 開發人員指南 - 動態主題