未知提供者: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
我正在尝试在我的控制器中使用 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