未知提供者:ngMessagesProvider with require.js

时间:2015-05-09 09:38:14

标签: angularjs requirejs

我正在尝试在我的控制器中使用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) {... })

但我收到错误:

  

错误:$ injector:unpr未知提供商未知提供商:   ngMessagesProvider

我做错了什么?

1 个答案:

答案 0 :(得分:3)

检查ngMessages的API它是directive,而不是provider,因此您无法将其作为角度组件中的依赖项注入。您可以在html上将其用作AE(属性/元素)

<强> 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