未知提供者:ngMessagesProvider require.js

Unknown provider: ngMessagesProvider with require.js

我正在尝试在我的控制器中使用 ngMessages:

我正在设置我的 require.js 配置:

require({

  // libraries dependencies (fallback support)
  paths: {

    jquery: [
      'vendor/jquery/2.1.3/jquery.min'
    ],

    bootstrap: [
      'vendor/bootstrap/3.3.2/js/bootstrap.min'
    ],

    angular: [
      'vendor/angular.js/1.3.11/angular.min'
    ],

    angularResource: [
      'vendor/angular.js/1.3.11/angular-resource.min'
    ],

    angularAnimate: [
      'vendor/angular.js/1.3.11/angular-animate.min'
    ],

    ngMessages: [
      'vendor/angular.js/1.3.11/angular-messages.min'
    ],

    uiBootstrap: [
      'vendor/angular-ui/bootstrap/0.12.0/ui-bootstrap-tpls.min'
    ],

    uiRouter: [
      'vendor/angular-ui/ui-router/0.2.13/angular-ui-router.min'
    ],



  },

  // define js scripts dependencies
  shim: {

    'bootstrap': {
      deps: ['jquery']
    },

    'angular': {
      deps: ['bootstrap'],
      exports: 'angular'
    },

    'angularResource': {
      deps: ['angular']
    },

    'angularAnimate': {
      deps: ['angular']
    },

    'ngMessages': {
      deps: ['angular']
    },

    'uiBootstrap': {
      deps: ['bootstrap',  'angular']
    },

    'uiRouter': {
      deps: ['angular']
    },


  },

  priority: [
    'angular'
  ],

  deps: ['./ng.app']

});

并且在 module.js 我需要 ngMessages:

define(function(require) {
  'use strict';

  var angular = require('angular');
  require('angularResource');
  require('ngMessages');

  require('uiRouter');
  require('uiBootstrap');

  // angular module definition
  return angular.module(
    // module name
    'companies',

    // module dependencies
    [
      'ngResource',
      'ngMessages',

      'ui.router',
      'ui.bootstrap',

      require('shared/fend/input-utils/package').name,
      require('shared/fend/pagination/package').name
    ]
  );

});

然后在我的控制器中尝试注入 ngMessages:

define(function(require) {
  'use strict';

  var module = require('../module');
  require('../resources/rest');


  module.controller('CompaniesNewCtrl', CompaniesNewCtrl);


  CompaniesNewCtrl.$inject = [
    '$rootScope', '$scope', '$state',
    'CompaniesResource',
    'InputFocusFactory', 'ngMessages'
  ];

  function CompaniesNewCtrl($rootScope, $scope, $state, resource, input, ngMessages) {... })

但我收到错误消息:

Error: $injector:unpr Unknown Provider Unknown provider: ngMessagesProvider

我做错了什么?

检查 ngMessages 的 API 它是 directive,而不是 provider,因此您不能将其作为 angular 组件的依赖项注入。您可以在 html 上将其用作 AE (attribute/element)

API

.directive('ngMessages', ['$animate', function($animate) {
 var ACTIVE_CLASS = 'ng-active';
 var INACTIVE_CLASS = 'ng-inactive';

 return {
   require: 'ngMessages',
   restrict: 'AE',
   controller: ['$element', '$scope', '$attrs', function($element, $scope, $attrs) {
     //.......code here