Создать провайдера для использования в угловых.config()

Я пытаюсь создать поставщика для использования в.config(), но не знаю, где я ошибаюсь, поскольку я впервые создаю поставщика.

На самом деле хочу вернуть результат поставщика CacheFactory.. фабрика уже работает, но так как в конфигурации не принимает фабрику, у меня есть эта проблема.

.factory('_CONFIG', ['$cacheFactory', function($cacheFactory) {
    return $cacheFactory('config_global');
}])

.provider('__CONFIG', function($cacheFactory) {
    var _cache = $cacheFactory('config_global');
    return {
        $get: function(key) {
            return _cache.get(key);
        }
    };
});

Я хочу использовать здесь:

.config(['$mdThemingProvider', function ($mdThemingProvider, __CONFIGProvider) {
    'use strict';

    var themes = __CONFIGProvider.get('config');

    if(themes.themes_dark) {
        $mdThemingProvider.theme('default')
            .dark()
            .primaryPalette('blue', {
                'hue-1'   : '700',
                'hue-2'   : '600',
                'hue-3'   : '500'
            })
            .accentPalette('pink');
    }
    else {
        $mdThemingProvider.theme('default')
            .primaryPalette('blue', {
                'hue-1'   : '700',
                'hue-2'   : '600',
                'hue-3'   : '500'
            })
            .accentPalette('pink');
    }

}])

НОВЫЙ ПЛАНКЕР: http://plnkr.co/edit/RVK8EwoyOQNka5E84jSg?p=preview

2 ответа

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>

    .config([
    '$mdThemingProvider',
    /*!~~!!!!You missed Me!!!!~~!*/
    '__CONFIGProvider',//<-------------------- 
function ($mdThemingProvider, __CONFIGProvider)
  1. Являются ли оба файла кода частью одного и того же модуля? (angular.module...), если нет, проверьте, указан ли модуль провайдера в разделе dep внедрения модуля config.
  2. Проверьте, появляется ли поставщик до или после файла конфигурации в файле индекса.
Другие вопросы по тегам