'ng-strict-di'为真时定义'$ mdThemingProvider'

时间:2016-03-22 13:12:17

标签: javascript html angularjs angular-material

我从角度材料中定义了一个调色板

$mdThemingProvider.definePalette('amazingPaletteName', {
    '50': 'ffebee',
    '100': 'ffcdd2',
    '200': 'ef9a9a',
    '300': 'e57373',
    '400': 'ef5350',
    '500': 'f44336',
    '600': 'e53935',
    '700': 'd32f2f',
    '800': 'c62828',
    '900': 'b71c1c',
    'A100': 'ff8a80',
    'A200': 'ff5252',
    'A400': 'ff1744',
    'A700': 'd50000',
    'contrastDefaultColor': 'light',    // whether, by default, text         (contrast)
                                // on this palette should be dark or light
    'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
     '200', '300', '400', 'A100'],
    'contrastLightColors': undefined    // could also specify this if default was 'dark'
});



$mdThemingProvider.theme('custom2')
        .primaryPalette('amazingPaletteName');

在我的主index.html中定义ng-strict-di

<!DOCTYPE html>
<html ng-app="exampleApp" ng-strict-di>

但我有这个错误

Uncaught Error: [$injector:modulerr] Failed to instantiate module appModule due to:
Error: [$injector:strictdi] function($mdThemingProvider) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.4.8/$injector/strictdi?p0=function(%24mdThemingProvider)
    at http://localhost:4000/bower_components/angular/angular.js:68:12
    at Function.annotate [as $$annotate] (http://localhost:4000/bower_components/angular/angular.js:3792:17)
    at Object.invoke (http://localhost:4000/bower_components/angular/angular.js:4501:36)
    at runInvokeQueue (http://localhost:4000/bower_components/angular/angular.js:4429:35)
    at http://localhost:4000/bower_components/angular/angular.js:4437:11
    at forEach (http://localhost:4000/bower_components/angular/angular.js:340:20)
    at loadModules (http://localhost:4000/bower_components/angular/angular.js:4419:5)
    at createInjector (http://localhost:4000/bower_components/angular/angular.js:4344:11)
    at doBootstrap (http://localhost:4000/bower_components/angular/angular.js:1676:20)
    at Object.angular.resumeBootstrap (http://localhost:4000/bower_components/angular/angular.js:1705:12)
http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=appModule&p1=Error%3A%…F%2Flocalhost%3A4000%2Fbower_components%2Fangular%2Fangular.js%3A1705%3A12)

将前置放在ng-strict-di并定义调色板是否存在问题?

谢谢!

----编辑----

问题是使用数组注释。

.config(['$mdThemingProvider',function($mdThemingProvider){
    $mdThemingProvider.definePalette('module',{
        '50': '90ad53',
        '100': 'dddddd',
        '200': '90ad53',
         ...
        'contrastDefaultColor': 'dddddd',    // whether, by default, text (contrast)
                                            // on this palette should be dark or light
        'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
            '200', '300', '400', 'A100'],
        'contrastLightColors': undefined
    });
    $mdThemingProvider.theme('default')
        .primaryPalette('module');

}]);

感谢Pankaj Parkar!

1 个答案:

答案 0 :(得分:0)

来自documentation

  

尝试调用未明确注释的函数或提供程序时,如果应用程序在启用了严格模式的情况下运行,则会发生此错误。

发生错误是因为'$mdThemingProvider'在配置函数中使用之前未被列为依赖项。

要解决此问题,您需要将'$mdThemingProvider'定义为依赖项:

.config(['$mdThemingProvider',function($mdThemingProvider){
    $mdThemingProvider.definePalette('module',{
         ...
        // configuration goes here
    });

    $mdThemingProvider.theme('default')
        .primaryPalette('module');

}]);