Question

我正在尝试创建一个在.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');
    }

}])

NEW PLUNKER：http://plnkr.co/edit/RVK8EwoyOQNka5E84jSg?p=preview

Answer 1

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>

Answer 2

    .config([
    '$mdThemingProvider',
    /*!~~!!!!You missed Me!!!!~~!*/
    '__CONFIGProvider',//<-------------------- 
function ($mdThemingProvider, __CONFIGProvider)

两个代码文件都是同一模块的一部分吗？（angular.module ...）如果没有，检查提供者的模块是否在配置模块的dep注入中列出..
检查提供程序是否出现在索引文件的配置文件之前或之后。

创建用于angular .config（）的提供程序

2 个答案: